jQuery 悬停导致 div 闪烁

Question

我正在开发一个 'portfolio'，它可以显示不同事物的图片。当 end-user 悬停在其中一张图片上时，我希望 'caption' 在图像上淡入。当他们停止将鼠标悬停在图片上时，标题就会淡出。我试图做的是添加以下 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' class:

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

所以上限 class 没有显示，悬停时，我希望它淡入：

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

现在的问题是：当我将鼠标悬停在其中一张图片上时，帽子淡入、淡出、淡入，直到我悬停出来。

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

谢谢。

Answer 1

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

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

所以你的 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 是全角。它应该在 bootstrap 页面的上下文中工作得更好。

jQuery 悬停导致 div 闪烁

jQuerys' hover causes div to flicker

html

css

jquery

hover