2

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

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

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

私は正常に動作しますが、画像にあるテキストにカーソルを合わせることができるようにしたいのですが、試行するたびに「バウンス」し続けます

どんな助けでも大歓迎です、ありがとう、キース

4

1 に答える 1

11

良い質問。

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

良い解決策は、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 に割り当てる必要があります。問題になることはありません。

于 2008-11-21T13:16:18.480 に答える