如何根据光标移动到*的元素更改jQuery .mouseleave(）的行为

How do I alter behaviour of jQuery .mouseleave() based on the element the cursor moves to?

本文关键字：jQuery mouseleave 元素何根光标移动更新时间：2023-09-26

大家好，我整理了一个简单的下拉菜单系统，该系统使用悬停意图来显示子菜单，并显示灯箱样式的"熄灯"深色背景。

我已经让菜单正常工作，但我想更新它，所以如果你从一个项目移动到下一个项目，深色背景会留在原地，而不是消失并重新出现。

我创建了一个jsFiddle，所以你可以看到我在说什么：http://jsfiddle.net/gGd6Y/10/

尝试将鼠标悬停在菜单项 1 上，然后移动到菜单项 2。

我希望能够在调用 HoverIntent 的 .mouseleave（）部分看到鼠标光标移动到的元素，然后如果它是另一个菜单项，我会阻止深色背景被关闭。

以HTML目前的设置方式，无法完成。阴影覆盖其他可悬停元素。因此，当您mouseleave时，您将悬停在阴影上，而不是其他LI。

我提出的解决方案：http://jsfiddle.net/iambriansreed/k98LP/

我让菜单出现在阴影上方。我延迟了阴影淡出操作，并确保在实际淡出之前没有悬停其他菜单项。

看看这是否有帮助：http://jsfiddle.net/gGd6Y/11/

我已经更改了菜单项以保持在覆盖层的顶部。

编辑：

我在上一条评论中提出的解决方案：

http://jsfiddle.net/gGd6Y/16/

简单的解决方案是将mouseleave侦听器添加到所有项目的容器中。

更灵活的解决方案是存储每个元素is_element_hovered布尔值。当发生mouseleave事件时，设置小延迟，然后检查布尔值并正确设置背景动画。