Jquery 悬停显示 div 并保持答案

【问题标题】：Jquery hover show div and stayJquery 悬停显示 div 并保持
【发布时间】：2013-09-30 08:08:24
【问题描述】：

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

http://jsfiddle.net/uWRLr/

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

【问题讨论】：

标签： jquery image hover fade out

【解决方案1】：

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

【讨论】：

【解决方案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)
    })
});

这样，当您进入/退出容器时，功能可用。 Here's a fiddle.

【讨论】：

【解决方案3】：

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

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

当您停止悬停图像时，第二个函数就会运行，因此删除它会停止这种情况，并且 div 将保持显示。

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

【讨论】：