0

大家好，我整理了一个简单的下拉菜单系统，它使用 hoverIntent 来显示子菜单并显示灯箱样式的“熄灯”深色背景。

我已经让菜单工作了，但我想更新它，所以如果你从一个项目移动到下一个项目，深色背景会保持在原来的位置，而不是消失和重新出现。

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

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

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

4

3 回答 3

1

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

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

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

于 2012-04-22T14:28:54.323 回答
1

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

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

编辑：

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

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

于 2012-04-22T14:46:57.513 回答
0

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

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

于 2012-04-22T14:30:13.793 回答