如何防止鼠標懸停效果鼠標離開

Question

我試圖做鼠標懸停和顯示拇指後效果不disppearing，這是示例代碼：

<ul> 
    <li><a href="">testing</a></li> 
    <li><a href="">testing</a></li> 
    <li><a href="">testing</a></li> 
    <li><a href="">testing</a></li> 
    <li><a href="">testing</a></li> 
    <li><a href="">testing</a></li> 
    <img class="img" src="http://jsfiddle.net/img/logo.png" style="display:none"> 
</ul> 

JS腳本：

$('li').hover(
    function(e){ 
    $('.img').css({ 
     'position':'absolute', 
     'left': e.pageX, 
     'top': e.pageY 
    }).fadeIn(); 
}, 
    function(e){ 
    $('.img').hide(); 
}); 

演示可在這裏查看：http://jsfiddle.net/8zG2Q/2/,

問題是當鼠標懸停在物品上時，鼠標離開所有物品後圖像不會隱藏。我已經嘗試使用show（）而不是fadeIn（），但這沒有幫助，因爲我從服務器加載圖像，需要時間才能看到。

因此，當鼠標不在任何位置時，隱藏圖像會是一個很好的解決方案嗎？感謝幫助。

Answer 1

在調用fadeIn()，停止動畫（任選地清除隊列，並且還跳轉到動畫的末尾）然後隱藏元件（​​復位到「基態」），如下所示：

$('li').hover(
    function(e){ 
    $('.img').css({ 
     'position':'absolute', 
     'left': e.pageX, 
     'top': e.pageY 
    }).stop(true,true).hide().fadeIn(); 
}, 
    function(e){ 
    $('.img').hide(); 
});