使用jQuery取消CSS悬停行为

Question

我所在的网站有一个导航菜单（一个CSS格式的无序列表），其中某些类别有子菜单（子无序列表）。

这个CSS规则隐藏了一个子菜单无序列表：

.main-navigation ul ul {
    display:none;
}

这个 CSS 规则会在访客将鼠标悬停在顶级菜单链接上时显示子菜单的无序列表：

.main-navigation ul li:hover > ul {;
    display:block;
}

这是为那些（可能不存在的）在浏览器中禁用了JavaScript的用户而做的。

现在我正在使用jQuery为导航菜单增加功能，而我需要做的第一件事情就是禁用CSS规定的悬停行为。由于某种原因，我很难做到这一点，需要一些帮助。以下是我尝试过的内容：

jQuery(document).ready(function($) {
     $('.main-navigation ul li:hover > ul').css('display', 'none');

});

没有成功，CSS仍然控制着行为，子菜单在悬停时弹出，好像没有jQuery存在。这意味着我做得不正确。

如果有人能解释一下应该如何做，我将非常感激！

- Dimitri Vorontzov

Answer 1

试一下这个：

演示

jQuery(document).ready(function($) {
     $('.main-navigation ul li').on('mouseover',function(){
        $('.main-navigation ul li:hover > ul').css('display', 'none');
     });
});

- A. Wolff

---

太完美了，@roasted！非常顺利。谢谢你！ - Dimitri Vorontzov

这段代码非常完美，@roasted，只有一个例外。脚本没有考虑到用户将鼠标移开链接后会发生什么。你能再帮忙一下吗？我会非常感激！ - Dimitri Vorontzov

我不明白你的问题，请提供一个样例或详细说明如何重现你的问题。 - A. Wolff

我看到你的控制台有一些错误。首先，通过使用jQuery迁移或升级插件或降级jQuery版本来修复这些错误。话虽如此，你的菜单行为很奇怪，我没有时间调试你的整个网站，恐怕无法帮助你解决问题。你应该打开一个新的问题，包括你用来设置菜单和子菜单的所有代码。基本上，你想要的菜单行为在互联网上有很多例子，你应该能够找到一个适合你需求的。 - A. Wolff

Answer 2

您最好的做法是从父元素中删除 main-navigation 类。否则，您将无法使用 JavaScript 操纵伪类的样式。

- techfoobar

---

你的意思是这样的，@techfoobar：$('.main-navigation ul').removeClass('.main-navigation'); - 我说得对吗？ - Dimitri Vorontzov

移除类，您将失去所有附加的CSS样式规则，甚至包括一些您想保留的。 - A. Wolff

是的，出于某种神秘的原因，删除该类并没有取消悬停行为，@roasted。（我怀疑我做错了什么。）不过 - 你的解决方案是最好的。 - Dimitri Vorontzov

正如Roasted所说，删除该类别也将删除其他样式，这可能不是您想要的。 - techfoobar