Jquery悬停显示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 .