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等等等等，你得到的点直到你停止徘徊。

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

1 个答案: