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

忽略Mouseover元素的子元素中的Mouseout事件

2 个答案: