Question

我需要知道如何解决这个问题。我的名单上有一个mouseleave事件。

jQuery(".list").live("mouseleave", function(event) {

    alert("Boom");

});

但与此同时，我显示了一个工具提示。此工具提示不属于此列表，它位于其他div中。

现在，当我将鼠标移到该div上时，我收到警报 - 我离开了列表。

请告诉我，当我在这个工具提示中移动鼠标时，我怎么能这样做，不会有任何动作。

我试过这句话，但它不起作用：

if($(event.target).hasClass('name')) alert("D");

Answer 1

这是解决您问题的有效方法：http://jsfiddle.net/SVzv5/8/

在此示例中，红色方块是您的列表，蓝色方块是您的工具提示。在jsfiddle上与他们互动，看他们是否正常工作。

Html代码：

<div id="under"></div>
<div id="over"></div>

jQuery代码：

$('#under').bind('mouseover', function () {
    $(this).css({background:'yellow'});
}).bind('mouseout', function () {
    $(this).css({background:'red'});
});

CSS代码：

#under {
    position:absolute;
    width:200px;
    height:200px;
    top:0;
    left:0;
    background:red;
    display:block;
    cursor:pointer;
}
#over {
    position:absolute;
    width:200px;
    height:200px;
    top:100px;
    left:100px;
    background:blue;
    display:block;
    pointer-events: none;
}

Answer 2

您可以使用relatedTarget事件中的mouseleave属性，其中包含在mouseleave事件触发时鼠标所在元素的对象：

jQuery('.list').bind('mouseleave', function(event) {
  if(jQuery(event.relatedTarget).attr('id') != 'yourToolTipId') {
    alert("Boom");
  }
});

jQuery和mouseover事件

2 个答案: