使用jQuery取消CSS悬停行为

[英]Cancel CSS hover behavior with jQuery


The website I work on has a navigation menu (a CSS-formatted unordered list) with sub-menus for some of the categories (children unordered lists).

我工作的网站有一个导航菜单(一个CSS格式的无序列表),其中包含一些类别(子无序列表)的子菜单。

This CSS rule hides a submenu unordered list:

此CSS规则隐藏子菜单无序列表:

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

And this CSS rule makes submenu unordered list appear when a visitor hovers the cursor over the top level menu link:

当访问者将光标悬停在顶级菜单链接上时,此CSS规则会显示子菜单无序列表:

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

This is done for those (possibly non-existent) users who have JavaScript disabled in their browsers.

这适用于那些在浏览器中禁用JavaScript的用户(可能不存在)。

Now I'm spicing up that navigation menu with jQuery, and the very first thing that I need to do is disable the on hover behavior, dictated by CSS. For some reason I'm having hard time doing so, and could use some help. Here's what I tried:

现在我用jQuery加强了导航菜单,我需要做的第一件事就是禁用由CSS决定的悬停行为。出于某种原因,我很难这样做,并且可以使用一些帮助。这是我尝试过的:

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

});

No luck, CSS still controls the behavior, and the submenu pops up on hover, as if there's no jQuery present. Which means, I'm not doing it correctly.

没有运气,CSS仍然控制行为,子菜单在悬停时弹出,好像没有jQuery存在。这意味着,我没有正确地做到这一点。

I'd appreciate it if someone explained to me how this should be done!

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

2 个解决方案

#1


3  

Try this:

DEMO

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

#2


3  

The best you can do is remove the main-navigation class from the parent. Otherwise, you cannot manipulate the styles of pseudo classes from JavaScript.

您可以做的最好的事情是从父级删除主导航类。否则,您无法从JavaScript处理伪类的样式。


注意!

本站翻译的文章,版权归属于本站,未经许可禁止转摘,转摘请注明本文地址:https://www.itdaan.com/blog/2013/05/21/c17189df096a8b8ff9d51803b22712c0.html



 
  © 2014-2022 ITdaan.com 联系我们: