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

Question

大家好，我已经整理了一个简单的下拉菜单系统，该系统使用hoverIntent来显示子菜单，并且还显示灯箱样式'熄灭'深色背景。

我的菜单正常运行，但是我想更新它，所以如果你从一个项目移动到下一个项目，黑暗的背景会保持原样，而不是消失并重新出现。

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

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

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

Answer 1

使用HTML当前设置的方式无法完成。阴影覆盖了其他可收纳的元素。所以，当你mouseleave徘徊在影子上而不是其他LI时。

我建议的解决方案：http://jsfiddle.net/iambriansreed/k98LP/

我让菜单出现在阴影上方。我推迟了阴影淡出动作并确保在实际淡出之前没有其他菜单项被徘徊。

Answer 2

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

我已将菜单项更改为保留在叠加层顶部。

修改

我上次评论中提出的解决方案：

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

Answer 3

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

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