<a> href標籤沒有懸停效果css

Question

我有一個具有鰭狀肢效果的div，當它懸停在裏面時，我有一個帶有href的標籤，但是當我將它懸停時沒有懸停效果。
我不知道我的代碼有什麼問題。
它有一個父元素具有鰭狀肢懸停效果，其子元素實際上是<a>標記，根本沒有懸停效果。
我的意思是沒有鼠標指針，顏色變化發生在<a>標籤。這一天我一直在玩這個代碼，一無所有！

#flippers { 
 
\t max-width:994px; 
 
\t text-align:center; 
 
} 
 

 
.flip-container { 
 
\t position:relative; 
 
\t display: inline-block; 
 
\t float:right; 
 
\t padding:15px; 
 
\t margin-left:32px; 
 
} 
 

 
.flip-container-final { 
 
\t position:relative; 
 
\t display: inline-block; 
 
\t float:right; 
 
\t padding:15px; 
 
} 
 

 
.flip-container:hover .flipper, .flip-container.hover .flipper { 
 
\t transform: rotateY(180deg); 
 
} 
 

 
.flip-container:hover { 
 
\t background:#CCC; 
 
} 
 

 
.flip-container, .front, .back { 
 
\t width: 280px; 
 
\t height: 280px; 
 
} 
 

 
.flip-container-final:hover .flipper, .flip-container-final.hover .flipper { 
 
\t transform: rotateY(180deg); 
 
} 
 

 
.flip-container-final:hover { 
 
\t background:#CCC; 
 
} 
 

 
.flip-container-final, .front, .back { 
 
\t width: 280px; 
 
\t height: 280px; 
 
} 
 

 
.flipper { 
 
\t transition: 0.6s; 
 
\t transform-style: preserve-3d; 
 
\t position: relative; 
 
} 
 

 
.front, .back { 
 
\t backface-visibility: hidden; 
 
\t position: absolute; 
 
\t top: 0; 
 
\t left: 0; 
 
} 
 

 
.front { 
 
\t transform: rotateY(0deg); 
 
} 
 

 
.back { 
 
\t transform: rotateY(180deg); 
 
} 
 

 
.svn-icon-title { 
 
\t margin-top:110px; 
 
} 
 

 
.svn-icon-title a { 
 
\t text-decoration:none; 
 
\t color:#000; 
 
} 
 

 
.svn-icon-title a:hover { 
 
\t color:#db1616; 
 
}

<div id="flippers"> 
 
     <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="flipper"> 
 
       <div class="front"> 
 
        <img src="image/order.png" /> 
 
       </div> 
 
       <div class="back"> 
 
        <img src="image/order-back.png" /> 
 
       </div> 
 
      </div> 
 
      <div class="svn-icon-title"> 
 
       <a href="phon.php">order</a> 
 
      </div> 
 
      <p>make order</p> 
 
     </div> 
 
     
 
     <div class="flip-container" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="flipper"> 
 
       <div class="front"> 
 
        <img src="image/check.png" /> 
 
       </div> 
 
       <div class="back"> 
 
        <img src="image/check-back.png" /> 
 
       </div> 
 
      </div> 
 
      <div class="svn-icon-title"> 
 
       <a href="#">check</a> 
 
      </div> 
 
      <p>check order</p> 
 
     </div> 
 
     
 
     <div class="flip-container-final" ontouchstart="this.classList.toggle('hover');"> 
 
      <div class="flipper"> 
 
       <div class="front"> 
 
        <img src="image/deliver.png" /> 
 
       </div> 
 
       <div class="back"> 
 
        <img src="image/deliver-back.png" /> 
 
       </div> 
 
      </div> 
 
      <div class="svn-icon-title"> 
 
       <a href="#">deliver</a> 
 
      </div> 
 
      <p>deliver order</p> 
 
     </div> 
 
    </div>

Answer 1

的問題似乎是因爲位置的：絕對的;你會設置一些元素（正面/背面）。

發生了什麼事情是文本真的在這些元素背後，所以當您將鼠標懸停在文本上方時，您不會在文本上方懸停，而是將鼠標懸停在前/後元素上。所以瀏覽器沒有選擇懸停。

爲了解決這個問題，你可以嘗試在你的snv-icon-title類中設置position：absolute，給它設置一個寬度並確保它的z-index高於前/後元素。這應該使文字向前。