多次调用 Mouseenter答案

【问题标题】：Mouseenter called multiple times多次调用 Mouseenter
【发布时间】：2015-08-28 21:06:50
【问题描述】：

我正在建立一个网站，对于关于页面，我有一些图片，我想将其淡化为 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 中的第二行代码时，它解决了问题。我试过 mouseover、hover、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()

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

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

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

我认为处理这个问题的最快方法是为图像的容器赋予淡入淡出类，这样兄弟姐妹就不会干扰鼠标悬停监听器。

您可以将标记更改为：

<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);
    });
});

小提琴：https://jsfiddle.net/oLckb6h3/2/

【讨论】：

有什么方法可以让覆盖的文本变得不那么不透明？

【解决方案2】：

问题是元素定位，您试图覆盖图像兄弟，这会干扰图像上的悬停事件。要解决此问题，请尝试在父类（例如“tile”类）上调用悬停状态，并编辑 CSS 以使用 z-index 和定位将文本定位在图像上。

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

ul {
    list-style-type:none;
}

.bio {
    padding:15px;
}

.bio-header {
    margin-top:-150px;
}

.tile { display: inline-block;}

.tile > img { z-index: 0; position: relative; }

.tile > .bio { z-index: 1; position: relative; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="image-wrapper">
    <ul id="team-members">
        <li class="tile-wrapper">
            <div class="tile">
                <img src="http://placehold.it/158x210" class="fade" />
                <h3 class="bio bio-header" style="display:none;">Header</h3>
                <p class="bio bio-footer" style="display:none;">Information</p>
            </div>
        </li>
    </ul>
</div>

【讨论】：