jQuery 鼠标悬停/鼠标移开 show/hide div

Question

图中蓝色方块是buttonShowHidePicture（一个按钮），红色方块是currentPictures（一个div）。

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

我面临的问题：但是，只要我不向下滚动，下面的代码就可以工作：当我将光标移到底部的图片上时 div 向上滚动，因为它一直触发 hide/show。我怎样才能解决这个问题？

这是我的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();
});

jQuery 鼠标悬停/鼠标移开 show/hide div

jQuery mouseover / mouseout show/hide div

html

javascript

jquery

mouseover

mouseout