Jquery hover顯示div和逗留

Question

我正在構建一個小型jquery腳本，它將鼠標懸停在圖像上（顯示產品的技術規範）時顯示div。我的問題是，當你懸停時，新的div加載，然後它消失，因爲鼠標不再徘徊圖像，但新的div。任何想法如何解決這個問題，所以它不會眨眼？

http://jsfiddle.net/uWRLr/

$(document).ready(function(){ 
    $('.hover').hover(function(){ 
     $('.techinfo').fadeIn(500) 
    },function(){ 
     $('.techinfo').fadeOut(500) 
    }) 
}) 

Answer 1

我會在容器包裝的一切，並附上懸停事件到容器而不是，是這樣的：

<div class="main-container"> 
    <img class="hover" src="http://charlescorrea.com.br/blog/wp-content/uploads/2012/02/google-small.png" /> 
    <div class="techinfo">Here's the text</div> 
</div> 

...和你的Javascript：

$(document).ready(function(){ 
    $('.main-container').hover(function(){ 
     $('.techinfo').fadeIn(500) 
    },function(){ 
     $('.techinfo').fadeOut(500) 
    }) 
}); 

這樣，當你輸入/退出容器的功能是可用的。 Here's a fiddle。

Answer 2

卸下第二函數（），所以它沒有出口懸停功能。當你停止徘徊在圖像

$(document).ready(function(){ 
    $('.hover').hover(function(){ 
     $('.techinfo').fadeIn(500) 
    }) 
}) 

第二個功能是運行，因此刪除它就會停止，並出現在div將保持所示。

編輯：我沒有完全閱讀這個問題，Chris Kempen的回答更符合要求。

Answer 3

我會做的是將圖像和技術信息放在同一個div中，並將其懸停在外部div上。

http://jsfiddle.net/uWRLr/6/

<div class="hover"> 
    <img src="http://charlescorrea.com.br/blog/wp-content/uploads/2012/02/google-small.png" /> 
    <div class="techinfo">Here's the text</div> 
</div>