0

我有点难以理解为什么这不起作用。我有两个相互重叠的 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>
4

1 回答 1

5

是的，它正在做它应该做的事情。

您会看到，当您将元素悬停时，它会丢失 z-index，而另一个会弹出在其顶部，因此当发生这种情况时，您会在第一个元素上失去悬停效果，并且 z-index 会恢复为默认值，并且会弹出第一个元素一旦获得，但由于您再次尝试将其悬停，它会再次失去它的 z-index，依此类推，直到您停止悬停，您才明白这一点。

于 2013-05-05T17:56:14.733 回答