jQuery鼠標移出並且不隱藏特定元素

Question

假設我有兩個元素：一個導致出現特定div的錨點。 在這種情況下，單我不能將這兩個包裝成一個父容器，因此整個標記必須爲以下幾點：

<a href="#" class="trigger">click me</a> 
<div class="info">info displayed on trigger hover</a> 

非常基本的問題是：當鼠標離開觸發器我想要隱藏信息窗口，但只有當光標沒有超過它。 我該怎麼做？

幫助表示讚賞， 問候

Answer 1

如果你不能改變的標記在所有的，你可以給它一個很好的淡入淡出效果，並利用這一事實，淡入不是即時的優勢，這樣的事情會天天看.trigger/.info對：

$(".trigger, .info").hover(function() { 
    $(this).next().andSelf().filter(".info").stop().animate({opacity: 1 }); 
}, function() { 
    $(this).next().andSelf().filter(".info").stop().animate({opacity: 0 }); 
});​​​​​​ 

You can try a demo here，你可以打破這個信息一個功能.trigger，一個用於.info，我只是保持它多一點簡潔。這兩種功能版本看起來like this：

$(".trigger, .info").hover(function() { 
    $(this).next().stop().animate({opacity: 1 }); 
}, function() { 
    $(this).next().stop().animate({opacity: 0 }); 
}); 
$(".info").hover(function() { 
    $(this).stop().animate({opacity: 1 }); 
}, function() { 
    $(this).stop().animate({opacity: 0 }); 
}); 

這樣做是對mouseenter它消失在上mouseleave它淡出（通過.animate()）......但是從一個移動鼠標到另一會讓褪色在將.stop()放入淡出狀態並將其淡入之前會發生1幀。對於用戶，他們沒有看到發生了任何事情，當鼠標離開時，允許淡入繼續。

Answer 2

$('.trigger').live('mouseout',function (event) { 
    if (!$(event.relatedTarget).is('.info')) 
     $(this).next().hide(); 
});