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);
    });
  });
});