Mouseenter多次呼叫

Question

我正在建立一个网站，关于页面，我有图片，我想要淡出0.5不透明度，然后有文字淡入顶部如果他们。我的问题是，每当我把鼠标放在其中一个图像上时，它和上面的文本就会多次消失。下面是链接到我遇到麻烦的代码部分。只有当您将鼠标从包含的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，我查看了所有这些：

即使在stopPropagation之后，鼠标中心事件也会被调用两次

每次我在给定元素中移动鼠标时，鼠标都会触发鼠标。

JS鼠标触发两次

JQuery鼠标功能多次触发

如何停止在鼠标/鼠标保存上多次触发切换事件？

事件触发两次

()与mouseover()

并尝试了他们提出的一切，但到目前为止，还没有对我起作用。有什么想法吗？

Answer 1

正在发生的事情是，您正在图像上的元素中褪色，这会干扰鼠标对侦听器的干扰。所以当你在图像上悬停时，它开始褪色，但当元素淡入时，它会阻止光标离开图像，触发鼠标退出事件，然后当元素消失时它会重复出现。

我认为处理这一问题的最快方法是给图像容器以淡出类，这样兄弟姐妹就不会干扰mouseover侦听器。

可以将标记更改为：

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

Answer 2

问题是元素的定位，您正在尝试覆盖图像兄弟，这会干扰图像上的悬停事件。要解决这个问题，请尝试调用父类(如"tile“类)上的悬停状态，并编辑CSS以使用z索引和定位将文本定位到图像上。

​

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

​