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()在事件处理函数中使用事件方法。

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