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です。

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