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中的第二行代码时，它解决了问题。我尝试过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()

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

Answer 1

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

＆＃13;

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

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

我认为处理这个问题的最快方法是让图像的容器具有淡入淡出的类别，这样兄弟姐妹就不会干扰鼠标移动监听器。

您可以将标记更改为：

<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/

Mouseenter多次调用

2 个答案: