jQuery和鼠標懸停事件

Question

我需要知道如何解決這個問題。我的名單上有一個mouseleave事件。

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

    alert("Boom"); 

}); 

但同時我有一個工具提示顯示在它上面。此工具提示不屬於此列表，它位於其他div中。

現在，當我將鼠標移動到該div上時，我收到警報 - 我離開了列表。

請告訴我，當我在此工具提示中移動鼠標時，我該如何做，不會有任何操作。

我已經試過這句話，但它不工作：

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

Answer 1

您可以使用relatedTarget酒店需要從mouseleave事件，這包含的對象當時的鼠標在處結束的元素被解僱的事件：

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

Answer 2

基本上你需要用小超時執行事件處理程序，如果鼠標進入你的提示取消。這將通過以下方式實現：

var timeout;

handler = function() { 
    // handler 
}; 

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

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

Answer 3

這裏是一個工作解決問題的方法：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; 
}