Jquery-このイメージロールオーバーを修正する方法

Question

こんにちは。私はこの小さなJqueryスクリプトを持っています：リンクテキスト

$(document).ready(function() 
{
      $('#image p').hide();

      $('img').hover(function()
      {
            $('#image p').show(200); 
      }, function()
      {
            $('#image p').hide(200); 
      });
}); 

問題なく動作しますが、画像内にあるテキストの上にカーソルを置きたいと思うので、試行するたびに「バウンス」し続けます

どんな助けも大歓迎です、 おかげで、 キース

Answer 1

良い質問です。

問題は、マウスが段落の上にあるとき、マウスが画像の上にないことです。したがって、段落は非表示になります。段落が非表示になると、マウスが再び画像上にあるため、段落が再び表示されます。など...

良い解決策は、mouseoverとmouseoutの代わりにmouseenterイベントとmouseleaveイベントを使用することです。

$(document).ready(function(){
    $('#image p').hide();

    $('#image').bind("mouseenter", (function(){
        $('#image p').show(200)
     }));

    $('#image').bind("mouseleave", (function(){
        $('#image p').hide(200)
     }));

});

mouseenter / mouseleave イベントと mouseover / mouseout イベントの主な違いは、前者がバブルしないことです。

この例では、div＃imageの子段落はmouseenter / mouseleaveイベントを受け取ります（それらをリッスンしていない場合でも）が、イベントは親要素にバブルアップしません。 このページで詳細な議論を開始します。

また、イベントをimgタグではなく、それを含むdivに割り当てる必要があります。問題ないはずです。