игнорировать событие Mouseout из дочернего элемента элемента Mouseover

Мне нужно отобразить подсказку для изображения при наведении курсора мыши. Для этого я написал следующий код. Моя текущая проблема заключается в том, что когда я помещаю изображение во всплывающую подсказку div, событие происходит только для элемента image. Как я могу игнорировать событие 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);
            });
        });
    });

Пожалуйста, помогите мне, ребята. Я беспомощен.

2 2
jquery mouseevent mouseover dom-events event-bubbling

2 ответа:

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

$("document").ready(function() {
    $('.tooltip').mouseenter(function(event){
        var id = $(this).siblings('.tooltip-c').attr('id');
        $('.tp'+id).fadeIn(500);
        event.stopPropagation(); 
     });
});
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);
    });
  });
});
17