使用懸浮CSS選擇器更改z-index時，div閃爍

Question

我有點想知道為什么這行不通。 我有兩個div彼此重疊，一個帶有標題，另一個沒有。 一個沒有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，依此類推，依此類推，直到您停止懸停為止。