ignore Событие Mouseout от дочернего элемента элемента Mouseover

Question

Мне нужно отобразить всплывающую подсказку для изображения при наведении курсора мыши. Я написал для этого следующий код. Моя текущая проблема заключается в том, что когда я помещаю изображение в div tooltip, событие происходит только для элемента изображения. Как я могу игнорировать событие mouseover и mouseout из дочернего элемента моей родительской подсказки div?

$("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

Вы можете использовать способ .stopPropagation() в функции обработчика события.

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

Answer 2

Попробуйте использовать .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); 
    }); 
    }); 
});