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