Question

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

我想要＆＃34;前面＆＃34;当你的鼠标超出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添加处理程序。

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

$('.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();
});

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

3 个答案: