html - 使用悬停 CSS 选择器更改 z-index 时 Div 闪烁

Question

我有点卡住了，想弄清楚为什么这行不通。我有两个相互重叠的 div，一个有标题，一个没有。没有的那个有更高的 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 等等，直到您停止悬停，您才明白这一点。