javascript - 多次调用 Mouseenter

Question

我正在构建一个网站，对于“关于”页面，我有一些图片，我想将不透明度淡化为 0.5，然后让文字淡入顶部(如果有的话)。我的问题是，每当我将鼠标放在其中一张图片上时，它和上面的文字都会多次淡入淡出。 Here's 指向我遇到问题的代码部分的链接。仅当您将鼠标从包含的 div 外部移到图像上时才会出现此问题。

我的 jQuery:

$(document).ready(function() {
$('.fade').mouseenter(function() {
    $(this).fadeTo(150, 0.5);
    $(this).siblings().fadeIn(150);
}).mouseleave(function() {
    $(this).fadeTo(150, 1);
    $(this).siblings().fadeOut(150);
});
});

我注意到，当我删除 mouseenter 和 mouseleave 中的第二行代码时，问题就解决了。我试过鼠标悬停、悬停、stopPropogation，我已经查看了所有这些:

mouseenter event called twice even after stopPropagation

Mouseover and mouseleave trigger every time I move the mouse inside the given element

JS mouseenter triggered twice

JQuery mouseover function firing multiple times

How to stop toggle event from being fired multiple times on mouseenter/mouseleave?

jquery mouseover event firing twice

Jquery mouseenter() vs mouseover()

并尝试了他们建议的所有方法，但到目前为止对我没有任何效果。有什么想法吗？

Answer 1

发生的事情是您正在淡化图像上的元素，这会干扰鼠标悬停监听器。因此，当您将鼠标悬停在图像上时，它开始淡入淡出，但是当元素淡入时，它会阻止光标离开图像并触发 mouseout 事件，然后在元素消失后重复。

我认为处理此问题的最快方法是为图像容器提供淡入淡出类，这样 sibling 就不会干扰鼠标悬停监听器。

您可以将标记更改为:

<div id="image-wrapper" >
    <ul id="team-members">
        <li class="tile-wrapper fade">
            <div class="tile">
                <img src="http://placehold.it/158x210"/>
                <h3 class="bio bio-header" style="display:none;">Header</h3>
                <p class="bio bio-footer" style="display:none;">Information</p>
            </div>
        </li>
    </ul>
</div>

和 javascript 到:

$(document).ready(function() {
    $('.fade').mouseenter(function(ev) {
        $(this).fadeTo(150, 0.5);
        $(this).find('img').siblings().fadeIn(150);
    }).mouseleave(function() {
        $(this).fadeTo(150, 1);
        $(this).find('img').siblings().fadeOut(150);
    });
});

fiddle :https://jsfiddle.net/oLckb6h3/2/