javascript - Jquery：重叠 Div 导致触发 Div 失去焦点

Question

我有这个当前问题，我当前的 div 位置是这样的

<div class="photo-wrapper" style="positon:relative">
    <div class="img-menu" style="position:absolute">
        <img src="@Url.Content("~\Content\images\checkin.png")" />
        <br /><br />
        <img src="@Url.Content("~\Content\images\btn-login.png")"/>
    </div>
    <div class="avatar-wrap"><img src="bg.jpg"/></div>
 </div>

我有一个像这样的鼠标悬停事件

$(".photo-wrapper").mouseover(function () {

    //show specific password
    $(this).find('.img-menu').fadeIn('fast');
});
$(".photo-wrapper").mouseout(function () {
    $('.img-menu').each(function () { $(this).stop().css('display', 'none') });
});

假设 .img-menu 将位于 .photo-wrapper 之上，而 .img-menu 是 photo wrapper size 的一半。当我悬停 photo-wrapper 时， img-menu 会出来。但是，当我将光标移动到 img-menu 时，鼠标悬停甚至会闪烁一次。我如何让它认为 img-menu 是照片包装的一部分，以便悬停不会失去焦点？

Answer 1

尝试

$(".photo-wrapper").mouserenter(function () {
    //show specific password
    $(this).find('.img-menu').fadeIn('fast');
});
$(".photo-wrapper").mouseleave(function () {
    $('.img-menu').each(function () { $(this).stop().css('display', 'none') });
});