Cancel CSS hover behavior with jQuery

Question

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).

This CSS rule hides a submenu unordered list:

.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:

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

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

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(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.

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

A. Wolff · Accepted Answer · 2013-05-21 14:26:58Z

3

Try this:

DEMO

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

edited May 21, 2013 at 14:26

answered May 21, 2013 at 14:21

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dimitri Vorontzov Over a year ago

Perfect, @roasted! Worked like a charm. Thank you!

Dimitri Vorontzov Over a year ago

Everything is perfect about this snippet, @roasted, with one exception. The script does not consider what happens if the user moves the mouse away from the link. Could you help a little further with it, please? I'd be very grateful!

A. Wolff Over a year ago

I don't understang your issue, could you provide a sample or elaborate how to reproduce your issue?

A. Wolff Over a year ago

I see you have some errors in console. First fix these errors by migrate your code using jquery migrate or upgrade plugins or downgrade jquery version. That's said, your menu behaviour is strange, i don't have time to debug all your site, im afraid. You should post your problem by opening a new question including all the code you use to set menu and submenu. Basically, the behaviour you seem to want for you menu as plenty of examples on the internet, you should be able to find one that fit your needs.

techfoobar · Accepted Answer · 2013-05-21 14:20:07Z

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.

answered May 21, 2013 at 14:20

techfoobar

66.8k14 gold badges117 silver badges138 bronze badges

4 Comments

Dimitri Vorontzov Over a year ago

You mean, something like this, @techfoobar: $('.main-navigation ul').removeClass('.main-navigation'); - am I right?

A. Wolff Over a year ago

removing class, you will loose all attached css style rules even some you would like to keep

Dimitri Vorontzov Over a year ago

Yeah, and for some mysterious reason, removing that class did not cancel the hover behavior, @roasted. (I suspect that I did it wrong, somehow.) Still – your solution is the best.

techfoobar Over a year ago

As roasted said, removing the class will also remove other styles as well, probably not what you want.

Collectives™ on Stack Overflow

Cancel CSS hover behavior with jQuery

2 Answers 2

4 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related