Remove menu hover action after clicking the menu in jquery

Question

I have a dropdown menu that works by Classic CSS hover

if you've opened the menu with a click event, i need the hover effect to be removed but i can't because you're still hovering over the menu the menu doesn't disappear until you hover off which isn't ideal. I also tried using .hide() but then that messes with CSS hover functionality.

Is there a way in jQuery to remove the CSS hover activation of an element?

 $("ul.nav > li").click(function(e) {
   var url = $(this).attr("url");
   $(this).css('background', '#bbb');
   if( url == 'logoutServlet') {
       $.get('logoutServlet');
       window.location = "/a";
   }else{
       $("#content").html('Loading...').load(url);
  }       
});

You cannot remove hover effect. Add a new class and add empty to its hover css. This quesion has an answer here http://stackoverflow.com/a/5069151/3639582 — Shaunak D, Jun 17 '14 at 09:19
@ Don No i actually used classic hover method to show submenu on hover — vickisys, Jun 18 '14 at 09:38

score 0 · Answer 1 · answered Jun 17 '14 at 09:30

Hover state is not a class, you should use CSS to change hover behavior of an element.

for example:

a.whatever { color: black; } /* Default state */
a.whatever:hover { text-decoration: none; color: black; } /* Hover state */

You can match hover state rules with other states behavior to make it look the same.

Remove menu hover action after clicking the menu in jquery

1 Answers1