javascript - jQuery 鼠标悬停/鼠标悬停显示/隐藏 div

Question

图中所示的蓝色方 block 是buttonShowHidePicture(一个按钮)，红色方 block 是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();
});