jquery如何使mouseenter只在3秒後工作，並在mouseleave上終止

Question

我認爲這很簡單，但它似乎比預期更復雜。

我想做一個工具提示。當鼠標進入div時，應該彈出一個新的div。離開div時，新div必須離開。 目前爲止這麼好。 爲了使它變得複雜，新的div可能只在鼠標在div上超過3秒纔會出現，如果不是，則必須中止mouseenter。

這是我的代碼在這一刻：

$('.go_info').live("mouseenter", function(){ 
var q_tooltip_img = $(this).attr('id'); 
setTimeout(function() 
{ 
$("#tooltip_"+q_tooltip_img).show(); 
}, 2000); 
}); 

$('.go_info').live("mouseleave",function(){ 

var q_tooltip_img = $(this).attr('id'); 
$("#tooltip_"+q_tooltip_img).hide();  
}); 

謝謝！

Answer 1

試試這個

var mouseEnterTimer; 
$('.go_info').live("mouseenter", function(){ 

    var q_tooltip_img = $(this).attr('id'); 
    mouseEnterTimer = setTimeout(function() 
    { 
    $("#tooltip_"+q_tooltip_img).show(); 
    }, 3000); 

}); 

$('.go_info').live("mouseleave",function(){ 
    if(mouseEnterTimer) 
    clearTimeout(mouseEnterTimer); 

    var q_tooltip_img = $(this).attr('id'); 
    $("#tooltip_"+q_tooltip_img).hide();  
}); 

Answer 2

試試這個：http://jsfiddle.net/aYThd/