2

我正在构建一个小的 jquery 脚本，当您将鼠标悬停在图像上时会显示一个 div（以显示产品的技术规格）。我的问题是，当您悬停时，新的 div 加载然后它消失了，因为鼠标不再悬停图像而是新的 div。任何想法如何解决这个问题，所以它不会闪烁？

http://jsfiddle.net/uWRLr/

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

3 回答 3

2

我会将所有内容包装在一个容器中并将悬停事件附加到容器中，例如：

<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)
    })
});

这样，当您进入/退出容器时，该功能可用。这是一个小提琴。

于 2013-09-24T22:15:53.410 回答
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>
于 2013-09-24T22:17:55.267 回答
1

删除第二个 function() 使其没有退出悬停功能。

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

每当您停止悬停图像时，都会运行第二个函数，因此删除它将停止发生并且 div 将保持显示。

编辑：我没有完全阅读这个问题，Chris Kempen 的回答更符合被问到的内容。

于 2013-09-24T22:14:22.437 回答