Question

我正在开发一个＆＃39;投资组合＆＃39;它显示了不同的东西的图片。当最终用户将鼠标悬停在其中一张图片上时，我想要一个标题＆＃39;淡出图像。当他们停止在图片上方悬停时，标题会淡出。我尝试做的是添加以下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>

这是＆＃39; .cap＆＃39;类：

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

因此没有显示上限类，并且在悬停时，我希望它可以淡入：

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

现在的问题是：当我将鼠标悬停在其中一张图片上时，盖子会淡入，淡出，再次淡入，直到我徘徊。

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

感谢。

Answer 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是全宽。它应该在引导页面的上下文中更好地工作。

jQuery＆＃39;悬停导致div闪烁

1 个答案: