You need to use the mouseenter
and the mouseleave
events instead of hover
, or else it will trigger every time you mouse moves over the element. And the toggle will trigger all the time.
This should work fine:
jQuery(document).ready(function() {
jQuery('li').mouseenter(function() {
jQuery('.'+this.classList[0]).addClass('active');
}).mouseleave(function() {
jQuery('.'+this.classList[0]).removeClass('active');
});
});
Here's the FIDDLE
EDIT: If you want to apply this to only specific lists, add a common class to each ul
and update the first selector, like jQuery('ul.myclass > li')