Question

我有一个名为overlay的div类，它只是一个透明的盒子。当您将鼠标悬停在live-box div上时，span类应该消失（现在它在覆盖框下面），然后出现文本“test”并出现一个箭头（工作）。

所以基本上一切都有效，但是跨度中的文本跳过了叠加div，我尝试了几次jquery尝试，但由于淡入/淡出，即使我做了切换可见类，文本仍会跳转在叠加div下半秒钟。

<div class="live-box-outer">
    <div class="live-box" id="CMS">
        <div class="overlay" style="display: none">
            test
            <div class="arrow">
            </div>
        </div>
        <span class="long-span">Content Management</span> 
    </div>
</div>

我的javascript

 $('.live-box').hover(function () {
    $(this).not('.active, .invisible').find('.overlay').fadeIn(300);

}, function () {
    $(this).not('.active, .invisible').find('.overlay').fadeOut(300);
});

我的css

.overlay
{
    top: 0;
    left: 0;
    width: 134px;
    height: 134px;
    z-index: 2;
    position:relative;
    background: url(../img/overlay.png) repeat;
}

Answer 1

我猜你有：

.live-box-outer {
  position: relative;
}
.long-span {
  z-index: 1;
}

您想要的是overlay和long-span两者都位于live-box-outer的左上角。尝试改变这两个

.overlay, .long-span {
  top: 0;
  left: 0;
  position:absolute;
}

当overlay淡出时，它将覆盖long-span。另一种选择是在您淡出/显示long-span的同时淡出/隐藏overlay。

跨越div，希望跨度在div上空盘旋时消失

1 个答案: