jQuery mouseover / mouseout show / hide 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

尝试这样的事情

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

Answer 2

使用mouseleave事件代替mouseout。因为隐藏事件也会在div中的图像上触发。

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