忽略Mouseover元素的Mouseout事件

我需要在鼠标悬停时显示图像的工具提示。我为此写了下面的代码。我当前的问题是，当我将图像放入工具提示div中时，事件只发生在图像元素上。我怎么能忽略我父母的工具提示div的子元素的mouseover和mouseout事件？忽略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); 
      }); 
     }); 
    });

请帮帮我吧。我很无奈。

来源

2012-04-22 Gihan Dilusha

有什么问题吗？ – mihai 2012-04-22 09:15:58

如何忽略Mouseover元素的Mouseout事件？ – 2012-04-22 09:20:25

哪个孩子？目前的答案是无法回答的。 – gdoron 2012-04-22 09:23:31

您可以在事件处理函数中使用事件.stopPropagation()方法。

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

来源

2012-04-22 09:32:42 undefined

还是老兄... – 2012-04-22 09:39:58

@Gihan Dilusha在你的事件处理函数参数中传递'e'或'event'，然后使用'.stopPropagation'作为它的方法。我甚至使用了 – undefined 2012-04-22 09:42:27

。但它是一样的:( – 2012-04-22 10:37:27

尝试使用.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); 
    }); 
    }); 
});

来源

2012-04-22 12:43:03 tsherif

这直接解决了我的问题，我无法得到其他解决方案为我工作。 – 2014-04-02 15:05:13

比所有mouseover/mouseout解决方案效果更好，并且所有事件都可以防止默认设置。适用于IE11和Chrome。 – Arvy 2015-01-14 21:20:49

忽略Mouseover元素的Mouseout事件

回答

相关问题