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存在。这意味着，我没有正确地做到这一点。

如果有人向我解释应该怎么做，我会很感激！

Answer 1

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

Answer 2

试试这个：

DEMO

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

使用jQuery取消CSS悬停行为

2 个答案: