jQueryマウスアウト動作の問題

Question

私はdivでmouseenterとmouseoutを使用すると非常に奇妙な問題があります。上または下から来るdiv内のテキストを表示すると、すべて正常に動作します。 「切り替え」テキスト<p style="padding-left: 30px;">text</p>が表示され、マウスを削除するとテキストが消えます。

しかし、左または右から来るdivをホバーすると、mouseoutイベントが即座にトリガされ、テキストが再び消えます。

CSSを削除していないのは、それが原因で問題が発生する可能性があるためですか？ヘルプは非常に高く評価されるだろう！ありがとう！ターゲットより

jQuery(document).ready(function() { 
 
    jQuery("#fuss_hover").on({ 
 
    mouseenter: function() { 
 
     jQuery("#fuss_ak").fadeIn(500); 
 
    } 
 
    }); 
 
    jQuery("#fuss_hover").on({ 
 
    mouseout: function() { 
 
     jQuery("#fuss_ak").fadeOut(500); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="fuss_hover" style="margin: 6px 0px 6px 90px; width: 48%;"><span style="font-family: 'book antiqua',palatino; font-size: 14pt;">*</span><span style="font-family: 'book antiqua',palatino; font-size: 14pt; border-bottom: 1px dotted #000; cursor: help;">Mouseover Text</span> 
 
</div> 
 
<div id="fuss_ak" style="display: none; margin: 8px 0px 8px 90px; width: 75%;"> 
 
    <p style="padding-left: 30px;">text</p> 
 
</div>

Answer 1

mouseout火災とすぐなどの任意他の要素が推移している - それは、子要素を含んでいます。

mouseenterの適切な対応物はmouseleaveであり、mouseoutではありません。

Answer 2

この問題は、mouseoutの使用と、連続したイベントがキューに新しいアニメーションを追加していないという事実の組み合わせです。

mouseleaveを修正してstop(true)をfadeIn/fadeOutの前に呼び出してください。また、コードを簡略化してhover()（前述の両方のイベントを使用する）を使用し、fadeToggle()を使用するだけで済みます。

また、インラインCSSよりも外部スタイルシートを使用することを強くお勧めします。あなたがマウスをトリガしているときに、遅延（）を使用することができます

$("#fuss_hover").hover(function() { 
 
    $("#fuss_ak").stop(true).fadeToggle(500); 
 
});

#fuss_hover { 
 
    margin: 6px 0px 6px 90px; 
 
    width: 48%; 
 
    font-family: 'book antiqua', palatino; 
 
    font-size: 14pt; 
 
} 
 
#fuss_hover .text { 
 
    border-bottom: 1px dotted #000; 
 
    cursor: help; 
 
} 
 
#fuss_ak { 
 
    display: none; 
 
    margin: 8px 0px 8px 90px; 
 
    width: 75%; 
 
} 
 
#fuss_ak p { 
 
    padding-left: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="fuss_hover"> 
 
    <span>*</span> 
 
    <span class="text">Mouseover Text</span> 
 
</div> 
 
<div id="fuss_ak"> 
 
    <p>text</p> 
 
</div>

Answer 3

：これを試してみてください。

jQuery(document).ready(function() { 
 
     jQuery("#fuss_hover").on({ 
 
      mouseenter: function() { 
 
       jQuery("#fuss_ak").fadeIn(500); 
 
      } 
 
     }); 
 
     jQuery("#fuss_hover").on({ 
 
      mouseout: function() { 
 
       jQuery("#fuss_ak").delay(500).fadeOut(100); 
 
      } 
 
     }); 
 
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="fuss_hover" style="margin: 6px 0px 6px 90px; width: 48%;"><span style="font-family: 'book antiqua',palatino; font-size: 14pt;">*</span><span style="font-family: 'book antiqua',palatino; font-size: 14pt; border-bottom: 1px dotted #000; cursor: help;">Mouseover Text</span> 
 
</div> 
 
<div id="fuss_ak" style="display: none; margin: 8px 0px 8px 90px; width: 75%;"> 
 
    <p style="padding-left: 30px;">text</p> 
 
</div>

Answer 4

jQuery(document).ready(function() { 
 
    jQuery("#fuss_hover").on({ 
 
    mouseenter: function() { 
 
     jQuery("#fuss_ak").fadeIn(500); 
 
    } 
 
    }); 
 
    jQuery("#fuss_hover").on({ 
 
    mouseout: function() { 
 
     jQuery("#fuss_ak").fadeOut(500); 
 
    } 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="fuss_hover" style="font-family: 'book antiqua',palatino; font-size: 14pt;padding: 6px 0px 6px 90px; width: 100%;">*Mouseover Text 
 
</div> 
 
<div id="fuss_ak" style="display: none; margin: 8px 0px 8px 90px; width: 75%;"> 
 
    <p style="padding-left: 30px;">text</p> 
 
</div>