Question

我正在构建一个小的jquery脚本，当你将鼠标悬停在图像上时显示div（显示产品的技术规格）。我的问题是当你悬停时，新的div加载然后它消失，因为鼠标不再盘旋图像而是新的div。知道怎么解决这个问题，所以它不会眨眼吗？

$(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

我要做的是将图像和技术信息放在同一个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>

Answer 3

删除第二个函数（），使其没有退出悬停功能。

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

每当您停止悬停图像时，第二个功能都会运行，因此删除它将停止发生这种情况并且div将一直显示。

编辑：我没有完全阅读这个问题，Chris Kempen的答案更符合所要求的内容。

Jquery悬停显示div和逗留

3 个答案: