javascript - div 下的 span，当悬停在 div 上时希望 span 消失

Question

我有一个名为overlay 的div 类，它只是一个透明框。当您将鼠标悬停在 live-box div 上时，span 类应该消失(现在它在覆盖框下方)，并且文本“test”出现，并且下方出现一个箭头(有效)。

所以基本上一切正常，但 span 中的文本在覆盖 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。另一种选择是在淡出/显示 overlay 的同时淡出/隐藏 long-span。