jQuery鼠标/鼠标显示/隐藏div

Question

图中显示的蓝色方块是buttonShowHidePicture (一个按钮)，而红色方块是currentPictures (一个div)。

​

​

所需的功能：当我将鼠标移动到按钮上时，我希望div出现，然后我希望能够将鼠标移动到div上，然后单击其中的一幅图片。当游标离开div时，div必须消失。

问题--我面临的是：但是，只要我不向下滚动，下面的代码就能工作:当我在底部的图片上移动光标时，div滚动回滚，因为它总是会触发隐藏/显示。我怎么才能解决这个问题？

这是我的jQuery：

$('#buttonShowHidePicture, #currentPictures').mouseover(function () {
    $('#currentPictures').show();
});

$('#currentPictures, #buttonShowHidePicture').mouseout(function () {
    $('#currentPictures').hide();
});

Answer 1

使用mouseleave事件而不是mouseout。因为隐藏事件也在你的图像上触发，这是在一个div里面。

$('#currentPictures, #buttonShowHidePicture').mouseleave(function () {
$('#currentPictures').hide();
});

Answer 2

试试像这样的东西

$(document).ready(function () {
    $('li').mouseover(function (e) {
        e.stopPropagation();
        $('>.actions', this).css('visibility', 'visible')
    });
    $('li').mouseout(function (e) {
        e.stopPropagation();
        $('.actions').css('visibility', 'hidden')
    })
});

关于更多的https://www.sitepoint.com/community/t/show-hide-a-div-with-mouseover-and-mouseout-on-li/6441/2