Javascript Mouseenter打了多次电话

我正在建立一个网站，对于“关于”页面，我有一些图片，我想淡入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中的第二行代码时，它解决了这个问题。我试过鼠标悬停、停转、停转，我看过了所有这些：

---

他们建议的一切都试过了，但到目前为止，我还是一无所获。有什么想法吗？

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

$（文档）.ready（函数（）{
$（'.tile'）.mouseenter（函数（）{
$（this）.children（'img'）.fadeTo（150,0.5）.birdren（）.fadeIn（150）；
}).mouseleave（函数（）{
$（this）.children（'img'）.fadeTo（150,1）.birdren（）.fadeOut（150）；
});
});
ul{
列表样式类型：无；
}
.生物{
填充：15px；
}
.生物头{
利润上限：-150px；
}
.tile{显示：内联块；}
.tile>img{z-索引：0；位置：相对；}
.tile>.bio{z-index:1；位置：相对；}



标题
信息



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

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

您可以将标记更改为：

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

fiddle:
有没有办法为覆盖的文本设置关键帧，以避免变得不透明？
$(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);
    });
});