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是照片包装大小的一半。当我悬停照片包装时，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') });
});

Jquery：重叠Div会导致Div失去焦点

1 个答案: