jQuery mouseover / mouseout 显示/隐藏 div

Posted 2023-03-04

【中文标题】jQuery mouseover / mouseout 显示/隐藏 div

【英文标题】：jQuery mouseover / mouseout show/hide 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();
);

【参考方案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')
    )
);

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