3

我工作的网站有一个导航菜单（一个 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 存在一样。这意味着，我没有正确地做到这一点。

如果有人向我解释应该如何做，我将不胜感激！

4

2 回答 2

3

您能做的最好的事情就是main-navigation从父级中删除该类。否则，您无法从 JavaScript 操作伪类的样式。

于 2013-05-21T14:20:07.390 回答
3

尝试这个：

演示

jQuery(document).ready(function($) {
     $('.main-navigation ul li').on('mouseover',function(){
        $('.main-navigation ul li:hover > ul').css('display', 'none');
     });
});
于 2013-05-21T14:21:15.407 回答