jquery - 鼠标悬停和鼠标移出用jquery隐藏dom元素

Question

当你悬停它时，我想隐藏一个 dom 元素。我想显示它下面的 div。问题是当第一个元素隐藏时，jquery 不再看到悬停并将悬停 div 带回来。所以 div 切换得非常快。

当您的鼠标超出 div 区域时，我想要“前面”。

<div  class="blockLong front" ></div>
<div  class="blockLong"></div>

div 以绝对位置放置在eatchother 上，并且大小相同

这是jQuery：

$('.front').hover( function()
{
    $(this).hide();
});

$('.front').mouseout( function()
{
    $(this).show();
});

Answer 1

为了一致性，您应该hover专门使用：

$('.front').hover(function(){
    $(this).fadeTo(500,0);
}, function() {
    $(this).fadeTo(500,1);
});

这有效地做的是为每个mouseenter和添加一个处理程序mouseleave。

如果您不希望 div 在mouseleave事件触发时返回，您可以试试这个：

$('.front').mouseenter(function(){
    $(this).fadeOut(500);
});

$('blockLong:not(.front)').mouseleave(function(){
    $('.front').fadeIn(500);
})

Answer 2

尝试这个：

<div  class="blockLong front"></div>
<div  class="blockLong back"></div>

JS

$('.front').hover( function()
{
    $(this).hide();
});

$('.back').mouseout( function()
{
    $(".blockLong.front").show();
});

Answer 3

这就是我所做的：

<div  class="blockLong back"></div>
<div  class="blockLong front"></div>


$('.front').hover( function()
{
    $(this).hide();
});

$('.back').mouseout( function()
{
    $(this).next().show();
});