1

当您将鼠标悬停在几个框之一上时,我试图让弹出窗口出现,并且它工作正常,除了其他框出现在我的弹出窗口的顶部。我尝试将 z-index 值应用于 .original-box 和 .popup-box 但没有运气。我不明白为什么 z-index 在这里没有效果?

这是我所拥有的:

http://jsfiddle.net/CK4tA/

<div class="original-box">
    Hover over me
    <div class="popup-box popup-box-centre">
        Some popup content
    </div>
</div>

提前感谢您的任何指导!

编辑:太棒了-谢谢大家!只是出于好奇,为什么将 z-index:0 添加到 .original-box 会破坏它?这就是我最初拥有但没有工作的东西。再次感谢 :-)

4

3 回答 3

2

添加z-index.popup-box.

    .popup-box {
    position:absolute;
    top:0px;
    width:230px;
    height:230px;
    padding:10px;
    background-color:#EC006C;
    color:#FFF;
    -moz-transition:all 0.4s;
    -webkit-transition:all 0.4s;
    -o-transition:all 0.4s;
    transition:all 0.4s;
    opacity:0;
    filter:Alpha(opacity=0);
    z-index: 1;
}

演示

将 z-index 添加到框以将其显示在顶层。

于 2013-05-30T14:55:21.507 回答
0

您应该只将z-index属性放在悬停事件上。见下文;

.original-box:hover .popup-box {
  top:25px;
  opacity:1;
  filter:Alpha(opacity=100);
  z-index: 20;
}

在此处查看您修改后的 JSFiddle。希望这对你有帮助,我的朋友。

请注意,它是 20,您不希望与在其他项目上z-index使用的其他插件/代码发生冲突。z-index

于 2013-05-30T15:04:56.930 回答
0
.popup-box{
   z-index:1;
}

如果你将它添加到你的css中的类中,它将起作用

于 2013-05-30T14:54:26.830 回答