取消CSS悬停行为与jQuery

我工作的网站有一些导航菜单（一个CSS格式的无序列表）的子菜单的一些类别（儿童无序列表）。取消CSS悬停行为与jQuery

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

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

来源

2013-05-21 Dimitri Vorontzov

试试这个：

DEMO

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

来源

2013-05-21 14:21:15

完美，@roasted！像魅力一样工作。谢谢！ –

'+ 1'好玩的技巧;） – 2013-05-21 14:29:04

关于这个片段，@roasted的一切都是完美的，只有一个例外。该脚本不考虑如果用户将鼠标移离链接会发生什么情况。你能帮助一下吗？我会非常感激！ –

您可以做的最好的做法是从父项中移除main-navigation类。否则，您无法操作JavaScript中伪类的样式。

来源

2013-05-21 14:20:07 techfoobar

你的意思是，这样的事情，@techfoobar：$（ '主导航UL认证。 '）removeClass（' 主导航。'）。 - 我对吗？ –

删除类，你会松散所有附加的CSS样式规则，甚至一些你想保留 –

是的，并出于一些神秘的原因，删除该类没有取消悬停行为，@roasted。（我怀疑我做错了，不知何故。）仍然 - 你的解决方案是最好的。 –

取消CSS悬停行为与jQuery

回答

相关问题