jQuery' hover 导致 div 闪烁答案

【问题标题】：jQuerys' hover causes div to flickerjQuery' hover 导致 div 闪烁
【发布时间】：2015-02-14 22:01:44
【问题描述】：

我正在制作一个展示不同事物图片的“作品集”。当最终用户将鼠标悬停在其中一张图片上时，我想要一个“标题”淡入图像。当他们停止在图片上悬停时，标题会淡出。我试图做的是添加以下 HTML：

<div class="col-md-3">
    <img src="assets/img/port1.jpg" class="porthome">
    <div class="cap">
        <h1>Compulite</h1>
        <p> Lorem Ipsum </p>
    </div>
</div>

这是“.cap”类：

.cap {
    background: rgba(58, 197, 167, 0.8);
    height: 262px;
    width: 262px;
    position: relative;
    top: -285px;
    left: 3px;
    display: none;
}

所以没有显示 cap 类，并且在悬停时，我希望它淡入：

    $(".porthome").hover(function() {
        $(this).next(".cap").fadeIn('slow');
    }, function() {
        $(this).next(".cap").fadeOut("slow");   
    });

现在的问题是：当我将鼠标悬停在其中一张图像上时，帽子会淡入、淡出、再次淡入，直到我将鼠标悬停在外面。

这怎么可能？它是一个 jQuery 错误吗？我搞砸了吗？

谢谢。

【问题讨论】：

标签： jquery html css hover

【解决方案1】：

这种闪烁背后的原因是“悬停”状态结束，因为您在它前面创建了一个元素。现在您将鼠标悬停在 .cap 元素上。

要解决这个问题，您可以使用父 div 的“悬停”状态。由于这是父元素，因此如果光标位于任一子元素上方，您也会将其悬停。

所以你的 HTML 看起来像这样

<div class="col-md-3 cap-parent">
    <img src="assets/img/port1.jpg" class="porthome">
    <div class="cap">
        <h1>Compulite</h1>
        <p> Lorem Ipsum </p>
    </div>
</div>

JS：

$(".cap-parent").hover(function() {
    $(this).children().next(".cap").fadeIn('slow');
}, function() {
    $(this).children().next(".cap").fadeOut("slow");   
});

示例：http://jsfiddle.net/6phcq6vj/

注意：该示例效果不佳，因为此 div 是全宽的。它应该在引导页面的上下文中工作得更好。

【讨论】：