jquery - 点击事件后伪悬停类禁用

Question

我创建了一个菜单，有 3 层。

单击顶级项目后会出现问题。您会注意到，顶部项目上有一个 LI:Hover 伪类，当您将鼠标悬停在它们上方时，它会将它们突出显示为灰色。如果单击这些顶部项目之一，然后在菜单区域外等待 2 秒钟，它将恢复到当前页面的菜单项。

这是问题发生的地方。如果您现在将鼠标悬停在刚刚单击的顶部菜单项上，它的伪悬停似乎已经消失或被禁用。

我不确定这是我的 jQuery/Javascript 错误还是 CSS 错误。

任何帮助都会很棒！

谢谢，德文

Answer 1

动画运行后，<li>最终处于以下状态

<li style="background-color: transparent; background-position-y: 24px;">

background-color使用覆盖 CSS 规则的内联

#navigation li:hover, .active { background-color: #888888; }

将 revert() 方法从$curMenuTop.css('backgroundColor', 'transparent');to更改为$curMenuTop.css('backgroundColor', '');应该可以解决问题，因为它会删除 backgroundColor，而不是将其设置为transparent并允许 :hover 在必要时仍然获胜。