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 回答