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.

Answer 1

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

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