jQuery 和鼠标悬停事件答案

【问题标题】：jQuery and the mouseover eventjQuery 和鼠标悬停事件
【发布时间】：2012-09-20 21:20:31
【问题描述】：

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

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

    alert("Boom");

});

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

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

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

这句话我试过了，还是不行：

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

【问题讨论】：

这不是鼠标悬停事件，而是不同的鼠标离开事件！
您应该使用 .on 而不是 .live，因为 live 已被弃用
绝对是$(".list").on('mouseleave', [filter selector],function(event){});

标签： jquery live mouseover

【解决方案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;
}

【讨论】：

很棒的解决方案，我不知道 CSS 属性 pointer-events: none;所以我今天学到了一些新东西。

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

基本上，您需要执行您的事件处理程序，并在鼠标进入您的工具提示时取消它。可以通过以下方式实现：

变量超时；

handler = function () { 
    // handler 
};

jQuery('.list').bind('mouseout', function (event) {
    timeout = setTimeout(handler, 250);
});

jQuery('#tooltipId').bind('mouseover', function (event) {
    clearTimeout(timeout);
});

【讨论】：