1. 首頁
  2. 問答
  3. 懸停功能干擾HREF標籤

懸停功能干擾HREF標籤

2016-12-28 97 views
0

我在這裏有這個代碼，我想要完成的是可點擊的圖標，但它似乎像懸停功能我不允許我點擊圖標。我已經嘗試過z-index，但這似乎不起作用。懸停功能干擾HREF標籤

body { 
 
\t background-image: url("background.png"); 
 
\t background-size: 100%; 
 
\t background-repeat: no-repeat; 
 
\t background-color: rgb(19,68,97) 
 
} 
 
h1 { 
 
\t font-family: 'Libre Baskerville', serif; 
 
\t font-size: 50px; 
 
\t padding: 0px 0px 0px 0px; 
 
\t display: inline; 
 
} 
 
p { 
 
\t font-family: 'Quicksand', sans-serif; 
 
\t font-size: 15px; 
 
\t padding: 0px 0px 0px 0px; 
 
\t display: inline; 
 
} 
 
.boxAnimation { 
 
\t width: 520px; 
 
\t height: 300px; 
 
\t position: relative; 
 
\t background: rgba(255,255,255,0.3); 
 
\t display: inline-block; 
 
\t margin: 0 10px; 
 
\t cursor: pointer; 
 
\t color: #fff; 
 
\t box-shadow: inset 0 0 0 3px rgba(192,192,192,1); 
 
\t -webkit-transition: background 0.4s 0.5s; 
 
\t transition: background 0.4s 0.5s; 
 
\t z-index: 0; 
 
\t margin: center; 
 
} 
 
svg { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 0; 
 
} 
 
svg line { 
 
\t stroke-width: 6; 
 
\t stroke: #fff; 
 
\t fill: none; 
 
\t stroke-dasharray: 250; 
 
\t -webkit-transition: -webkit-transform .6s ease-out; 
 
\t transition: transform .6s ease-out; 
 
\t z-index: 0; 
 
} 
 
div:hover { 
 
\t background: rgba(255,255,255,0); 
 
\t -webkit-transition-delay: 0s; 
 
\t transition-delay: 0s; 
 
} 
 
div:hover svg line.top { 
 
\t -webkit-transform: translateX(-400px); 
 
\t transform: translateX(-400px); 
 
} 
 
div:hover svg line.bottom { 
 
\t -webkit-transform: translateX(400px); 
 
\t transform: translateX(400px); 
 
} 
 
div:hover svg line.left { 
 
\t -webkit-transform: translateY(400px); 
 
\t transform: translateY(400px); 
 
} 
 
div:hover svg line.right { 
 
\t -webkit-transform: translateY(-400px); 
 
\t transform: translateY(-400px); 
 
} 
 
.icons { 
 
\t z-index: 5; 
 
}
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> 
 
<script src="https://use.fontawesome.com/e0037e252a.js"></script> 
 
<body> 
 
<center> 
 
    <div class="boxAnimation"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
    <line class="top" x1="0" y1="0" x2="1560" y2="0"/> 
 
    <line class="left" x1="0" y1="360" x2="0" y2="-720"/> 
 
    <line class="bottom" x1="520" y1="360" x2="-1040" y2="360"/> 
 
    <line class="right" x1="520" y1="0" x2="520" y2="1080"/> 
 
    </svg> 
 
    <h1>Donia Amer</h1> 
 
    <br> 
 
    <p>&lt; insert title &gt;</p> 
 
    <br> 
 
    <br> 
 
    <div class="icons"> <a href="www.google.com"> <i class="fa fa-linkedin-square fa-inverse" aria-hidden="true" style="font-size:45px;"></i></a> &nbsp; \t &nbsp; &nbsp; \t &nbsp; <i class="fa fa-github-square" aria-hidden="true" style="font-size:45px;"></i> &nbsp; \t &nbsp; &nbsp; \t &nbsp; <i class="fa fa-twitter-square" aria-hidden="true" style="font-size:45px;"></i> &nbsp; \t &nbsp; &nbsp; \t &nbsp; <i class="fa fa-envelope-square" aria-hidden="true" style="font-size:45px;"></i> </div> 
 
    </div> 
 
</center> 
 
</body>

來源

2016-12-28 Donia Amer

+0

設置你的'svg''z-index：-1'而不是0; –

回答

0

添加position:relative到.icons的z索引屬性指定的元素的堆疊順序。堆棧順序較大的元素始終位於堆棧順序較低的元素前面。 注：z-index僅適用於定位元素（位置：絕對，位置：相對或位置：固定）。

這裏是例子

body { 
 
\t background-image: url("background.png"); 
 
\t background-size: 100%; 
 
\t background-repeat: no-repeat; 
 
\t background-color: rgb(19,68,97) 
 
} 
 
h1 { 
 
\t font-family: 'Libre Baskerville', serif; 
 
\t font-size: 50px; 
 
\t padding: 0px 0px 0px 0px; 
 
\t display: inline; 
 
} 
 
p { 
 
\t font-family: 'Quicksand', sans-serif; 
 
\t font-size: 15px; 
 
\t padding: 0px 0px 0px 0px; 
 
\t display: inline; 
 
} 
 
.boxAnimation { 
 
\t width: 520px; 
 
\t height: 300px; 
 
\t position: relative; 
 
\t background: rgba(255,255,255,0.3); 
 
\t display: inline-block; 
 
\t margin: 0 10px; 
 
\t cursor: pointer; 
 
\t color: #fff; 
 
\t box-shadow: inset 0 0 0 3px rgba(192,192,192,1); 
 
\t -webkit-transition: background 0.4s 0.5s; 
 
\t transition: background 0.4s 0.5s; 
 
\t z-index: 0; 
 
\t margin: center; 
 
} 
 
svg { 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
\t z-index: 0; 
 
} 
 
svg line { 
 
\t stroke-width: 6; 
 
\t stroke: #fff; 
 
\t fill: none; 
 
\t stroke-dasharray: 250; 
 
\t -webkit-transition: -webkit-transform .6s ease-out; 
 
\t transition: transform .6s ease-out; 
 
\t z-index: 0; 
 
} 
 
div:hover { 
 
\t background: rgba(255,255,255,0); 
 
\t -webkit-transition-delay: 0s; 
 
\t transition-delay: 0s; 
 
} 
 
div:hover svg line.top { 
 
\t -webkit-transform: translateX(-400px); 
 
\t transform: translateX(-400px); 
 
} 
 
div:hover svg line.bottom { 
 
\t -webkit-transform: translateX(400px); 
 
\t transform: translateX(400px); 
 
} 
 
div:hover svg line.left { 
 
\t -webkit-transform: translateY(400px); 
 
\t transform: translateY(400px); 
 
} 
 
div:hover svg line.right { 
 
\t -webkit-transform: translateY(-400px); 
 
\t transform: translateY(-400px); 
 
} 
 
.icons { 
 
\t z-index: 5; 
 
\t position:relative; 
 
}
<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> 
 
<script src="https://use.fontawesome.com/e0037e252a.js"></script> 
 
<body> 
 
<center> 
 
    <div class="boxAnimation"> <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
    <line class="top" x1="0" y1="0" x2="1560" y2="0"/> 
 
    <line class="left" x1="0" y1="360" x2="0" y2="-720"/> 
 
    <line class="bottom" x1="520" y1="360" x2="-1040" y2="360"/> 
 
    <line class="right" x1="520" y1="0" x2="520" y2="1080"/> 
 
    </svg> 
 
    <h1>Donia Amer</h1> 
 
    <br> 
 
    <p>&lt; Developer + Algorithm Enthusiast &gt;</p> 
 
    <br> 
 
    <br> 
 
    <div class="icons"> <a href="www.google.com"> <i class="fa fa-linkedin-square fa-inverse" aria-hidden="true" style="font-size:45px;"></i></a> &nbsp; \t &nbsp; &nbsp; \t &nbsp; <i class="fa fa-github-square" aria-hidden="true" style="font-size:45px;"></i> &nbsp; \t &nbsp; &nbsp; \t &nbsp; <i class="fa fa-twitter-square" aria-hidden="true" style="font-size:45px;"></i> &nbsp; \t &nbsp; &nbsp; \t &nbsp; <i class="fa fa-envelope-square" aria-hidden="true" style="font-size:45px;"></i> </div> 
 
    </div> 
 
</center> 
 
</body>

來源

2016-12-28 03:20:22

+0

完美謝謝！你介意向我解釋爲什麼這有效嗎？ –

+0

你能打勾的答案，如果它的工作 –

+0

@DoniaAmer請閱讀答案，我已經更新它 –

0

SVG的z-index屬性正好被設置爲 - 值

<!DOCTYPE html> 
 
<html lang="en" class="no-js"> 
 
    <head> 
 
     <title>Donia Amer</title> 
 
    <link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet"> 
 

 
     <script src="https://use.fontawesome.com/e0037e252a.js"></script> 
 

 
    <style> 
 

 
    body { 
 
     background-image:url("background.png"); 
 
       background-size: 100%; 
 
       background-repeat: no-repeat; 
 
       background-color: rgb(19,68,97) 
 

 
    } 
 

 
    h1{ 
 

 
     font-family: 'Libre Baskerville', serif; 
 
     font-size: 50px; 
 
     padding: 0px 0px 0px 0px; 
 
     display: inline; 
 
    } 
 

 
    p{ 
 
      font-family: 'Quicksand', sans-serif; 
 
     font-size: 15px; 
 
     padding: 0px 0px 0px 0px; 
 
     display: inline; 
 
    } 
 

 
    .boxAnimation { 
 
     width: 520px; 
 
     height: 300px; 
 
     position: relative; 
 
     background:rgba(255,255,255,0.3); 
 
     display: inline-block; 
 
     margin: 0 10px; 
 
     cursor: pointer; 
 
     color: #fff; 
 
     box-shadow: inset 0 0 0 3px rgba(192,192,192,1); 
 
     -webkit-transition: background 0.4s 0.5s; 
 
     transition: background 0.4s 0.5s; 
 
      z-index: 0; 
 
      margin: center; 
 

 
     } 
 

 
    svg { 
 
     position: absolute; 
 
     top: 0; 
 
     left: 0; 
 
     z-index: -1; 
 
    } 
 

 
    svg line { 
 
     stroke-width: 6; 
 
     stroke: #fff; 
 
     fill: none; 
 
     stroke-dasharray: 250; 
 
     -webkit-transition: -webkit-transform .6s ease-out; 
 
     transition: transform .6s ease-out; 
 
     z-index: 0; 
 
    } 
 

 
    div:hover { 
 
     background: rgba(255,255,255,0); 
 
     -webkit-transition-delay: 0s; 
 
     transition-delay: 0s; 
 
    } 
 

 
    div:hover svg line.top { 
 
     -webkit-transform: translateX(-400px); 
 
     transform: translateX(-400px); 
 
    } 
 

 
    div:hover svg line.bottom { 
 
     -webkit-transform: translateX(400px); 
 
     transform: translateX(400px); 
 
    } 
 

 
    div:hover svg line.left { 
 
     -webkit-transform: translateY(400px); 
 
     transform: translateY(400px); 
 
    } 
 

 
    div:hover svg line.right { 
 
     -webkit-transform: translateY(-400px); 
 
     transform: translateY(-400px); 
 
    } 
 

 
     .icons{ 
 
      z-index: 5; 
 
     } 
 

 
    </style> 
 
    </head> 
 

 
<body> 
 
<br><br><br><br><br><br><br><br><br><br><br><br> 
 
<center> 
 
    <div class="boxAnimation"> 
 
     <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"> 
 
     <line class="top" x1="0" y1="0" x2="1560" y2="0"/> 
 
     <line class="left" x1="0" y1="360" x2="0" y2="-720"/> 
 
     <line class="bottom" x1="520" y1="360" x2="-1040" y2="360"/> 
 
     <line class="right" x1="520" y1="0" x2="520" y2="1080"/> 
 
      </svg> 
 
      <h1>Donia Amer</h1><br> 
 
      <p>&lt; Developer + Algorithm Enthusiast &gt;</p> 
 
       <br> 
 
       <br> 
 
       <div class="icons"> 
 
        <a href="https://stackoverflow.com/questions/ask"> 
 
       <i class="fa fa-linkedin-square fa-inverse" aria-hidden="true" style="font-size:45px;"></i></a> 
 
       &nbsp; &nbsp; &nbsp; &nbsp; 
 
       <i class="fa fa-github-square" aria-hidden="true" style="font-size:45px;"></i> 
 
       &nbsp; &nbsp; &nbsp; &nbsp; 
 
       <i class="fa fa-twitter-square" aria-hidden="true" style="font-size:45px;"></i> 
 
       &nbsp; &nbsp; &nbsp; &nbsp; 
 
       <i class="fa fa-envelope-square" aria-hidden="true" style="font-size:45px;"></i> 
 
       </div> 
 

 

 
    </div> 
 

 
</center> 
 

 
</body> 
 
</html>

來源

2016-12-28 03:23:47 Deep

0

關鍵是在你的圖標選擇增加新屬性位置：相對

提醒

的z-index只適用於定位的元素

CSS

.icons { 
    z-index: 5; 
    position:relative; 
}

DEMO

來源

2016-12-28 03:35:56 Fiido93

相關問題

 相關問題