jquery remove add classes on hover

Question

Alright so i found a code and it seems to be working but I need to add something to that code to prevent it from firing if I hover over its child menu/sub-menu element but still needs to fire when i hover over other items or other items childern menu's this is the current script

$(document).ready(function() {     
   $("#navbar li:hover, #navbar li:sfhover").hover(function(){     
       $('#navbar .current-menu-parent, #navbar li.current-menu-item').addClass("non-ahover");    
   },     
   function(){    
       $('#navbar li.current-menu-parent, #navbar li.current-menu-item').removeClass("non-ahover");     
    });
});

So my current active menu would have either the .current-menu-parent or .current-menu-item. my sub menu starts with a < ul > class inside of the parent's < li > class and the sub-menus class is < ul class="sub-menu" > then proceeds with < li > classes for its items.

So my problem is when i hover over my sub-menu that is active by one of its items being the current page or by the parent page being viewed the script above fires and causes ugliness is there a snippet of code i can put inside of this script that stop the call if the current sub-menu is visible so it does not apply the class the script wants to apply?

I know might be a little confusing but if you need clarification at all please let me know and i will help as best as i can.

Jared Beck · Accepted Answer · 2011-04-29 20:05:38Z

3

Bind an event handler to the children
Have that handler call stopPropagation()

http://api.jquery.com/event.stopPropagation/

answered Apr 29, 2011 at 20:05

Jared Beck

17.7k11 gold badges76 silver badges106 bronze badges

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

7 Comments

xLRDxREVENGEx Over a year ago

do you think you can add it to the code for me i am new to all of this and have learned a lot over the last few hours to even days on this project of mine

Jared Beck Over a year ago

$(".submenu").hover(function(event){ event.stopPropagation(); });

xLRDxREVENGEx Over a year ago

ok and does that go into the current script or outside if inside where abouts

Jared Beck Over a year ago

inside the anonymous function you passed to $(document).ready() in your example

xLRDxREVENGEx Over a year ago

ok so i have been trying this a few different ways and its either me or the code but i can not figure it out i have put it in 4 spots before the **(HERE)** $(document).ready(function() { and after it $(document).ready(function() { **(HERE)** as well as after $('#navbar .current-menu-parent, #navbar li.current-menu-item').addClass("non-ahover"); }, **(HERE)** and after $('#navbar li.current-menu-parent, #navbar li.current-menu-item').removeClass("non-ahover"); **(HERE)** it just does not work the parent is higher then the submenu so i am not sure if that matters or not

|

Collectives™ on Stack Overflow

jquery remove add classes on hover

1 Answer 1

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related