隨着懸停改變Z指數閃爍的div閃爍CSS選擇器

Question

我有點卡住試圖找出爲什麼這不起作用。我有兩個divs彼此重疊，一個有標題，一個沒有。沒有z-index的有更高的z-index，但是在懸停時，它應該用z-index：0來顯示較低層。當我將鼠標懸停在div上方時，「wcaption」div正確顯示。當我懸停div的標題區域時，它會在「wcaption」div和「wocaption」div之間來回閃爍，每秒多次。我在其他瀏覽器上試過了，並且得到了相同的結果。

<style> 
#ad_content .ad_wocaption { 
    position: absolute; 
    top: 0; 
    z-index:100; 
} 
#ad_content .ad_wocaption:hover { 
    z-index: 0; 
} 
#ad_content .ad_caption { 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; 
    filter: alpha(opacity=75); 
    -moz-opacity: 0.75; 
    -khtml-opacity: 0.75; 
    font-family: Helvetica, Arial, "Lucida Grande", sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    position: absolute; 
    bottom: 0; 
    z-index: 20; 
    height: 60px ; 
} 
#opacity_filter { 
    background: #000; 
    opacity: 0.75; 
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)"; 
    filter: alpha(opacity=75); 
    -moz-opacity: 0.75; 
    -khtml-opacity: 0.75; 
    width: 134px; 
    height: 60px; 
    position: absolute; 
    bottom: 0; 
    z-index: 10;  
} 
#ad_content .ad_caption p { 
    color: fff; 
    margin: 5px 8px; 
} 
#ad_content .ad_caption span { 
    color: #696767; 
    margin-bottom: 5px; 
} 
#ad_content .ad_expand { 
    position: absolute; 
    right: 0; 
    bottom: 0; 
    z-index: 10; 
} 
</style> 
<div class="ad_wocaption"> 
    <a href="https://www.google.com/"><img src="images/ad_frleft.jpg" /></a> 
    <a href="#"><img class="ad_expand" src="images/expand.png" /></a> 
</div> 
<div class="ad_wcaption"> 
    <a href="https://www.google.com/"><img src="images/ad_frleft.jpg" /></a> 
    <a href="#"><img class="ad_expand" src="images/expand.png" /></a> 
    <div id="opacity_filter"></div> 
    <div class="ad_caption"> 
     <p>KIA Forte surprises and delights...</p> 
     <span>-MotorTrend</span> 
    </div> 
</div> 

Answer 1

是的，它正在做它應該做的事情。

當你將元素懸停時，你會看到它丟失了z-index，另一個彈出它的頂部，所以當這種情況發生時，你會失去懸浮效果，z-index會返回到默認值，第一個彈出一次增益，但是因爲你再次試圖將它懸停，它再次失去z-index，等等，你會明白，直到你停止盤旋爲止。