懸停功能干擾href標記
[英]Hover function interfering with a href tag
問題描述
我在這里有這段代碼，我想要完成的是可單擊的圖標，但是似乎我擁有的懸停功能不允許我單擊圖標。 我已經嘗試過z-index，但這似乎行不通。
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: 0; } 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; }
<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>< insert title ></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> <i class="fa fa-github-square" aria-hidden="true" style="font-size:45px;"></i> <i class="fa fa-twitter-square" aria-hidden="true" style="font-size:45px;"></i> <i class="fa fa-envelope-square" aria-hidden="true" style="font-size:45px;"></i> </div> </div> </center> </body>
3 個解決方案
解決方案1
0 已采納 2016-12-28 03:20:22
添加position:relative對於.icons的z-index屬性指定元素的堆疊順序。 具有較高堆疊順序的元素始終位於具有較低堆疊順序的元素之前。 注意：z-index僅適用於定位的元素（position：absolute，position：relative或position：fixed）。
這是例子
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: 0; } 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; 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>< Developer + Algorithm Enthusiast ></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> <i class="fa fa-github-square" aria-hidden="true" style="font-size:45px;"></i> <i class="fa fa-twitter-square" aria-hidden="true" style="font-size:45px;"></i> <i class="fa fa-envelope-square" aria-hidden="true" style="font-size:45px;"></i> </div> </div> </center> </body>
解決方案2
0 2016-12-28 03:23:47
只需將svg的z-index屬性設置為-value
<!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>< Developer + Algorithm Enthusiast ></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> <i class="fa fa-github-square" aria-hidden="true" style="font-size:45px;"></i> <i class="fa fa-twitter-square" aria-hidden="true" style="font-size:45px;"></i> <i class="fa fa-envelope-square" aria-hidden="true" style="font-size:45px;"></i> </div> </div> </center> </body> </html>
解決方案3
0 2016-12-28 03:35:56
如何創建 hover 效果並帶來 2 個不同的<a href>標簽？</a>
[英]How to create hover effect and bring 2 different <a href> tag?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.