jquery - Mouseover要素の子要素からのMouseoutイベントを無視します

Question

マウスオーバー時に画像のツールチップを表示する必要があります。そのために次のコードを書きました。私の現在の問題は、画像をツールチップdivに入れると、イベントは画像要素に対してのみ発生することです。親ツールチップdivの子要素からのmouseoverおよびmouseoutイベントを無視するにはどうすればよいですか？

$("document").ready(function() {
        $('.tooltip').mouseover(function(e){
            var id = $(this).siblings('.tooltip-c').attr('id');
            $('.tp'+id).fadeIn(500);
            $('.tp'+id ).mouseout(function(event){
                $('.tp'+id).fadeOut(300);
            });
        });
    });

助けてください。私は無力です。

Answer 1

代わりに .mouseenter ()と.mouseleave( )を使用してみてください。.mouseover()これらは、および とは異なる方法でイベント バブリングを処理し.mouseout()ます。私はそれがあなたの問題を解決するはずだと思います:

$("document").ready(function() {
  $('.tooltip').mouseenter(function(e){
    var id = $(this).siblings('.tooltip-c').attr('id');
    $('.tp'+id).fadeIn(500);
    $('.tp'+id ).mouseleave(function(event){
      $('.tp'+id).fadeOut(300);
    });
  });
});

Answer 2

.stopPropagation()イベントハンドラ関数でeventメソッドを使用できます。

$("document").ready(function() {
    $('.tooltip').mouseenter(function(event){
        var id = $(this).siblings('.tooltip-c').attr('id');
        $('.tp'+id).fadeIn(500);
        event.stopPropagation(); 
     });
});