jQuery mouseover / mouseout 显示/隐藏 div答案

【问题标题】：jQuery mouseover / mouseout show/hide divjQuery mouseover / mouseout 显示/隐藏 div
【发布时间】：2018-08-15 09:34:50
【问题描述】：

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

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

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

这是我的 jQuery：

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

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

【问题讨论】：

标签： javascript jquery html mouseover mouseout

【解决方案1】：

使用 mouseleave 事件而不是 mouseout。因为隐藏事件也会在 div 内的图像上触发。

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

【讨论】：

感谢您修复了行为！

【解决方案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')
    })
});

【讨论】：