CODEWITHSUNDEEP
jquery
ElectronSurf
ElectronSurf

Reputation: 205

Jquery - add class on hover

I want when mouse goes on li jquery add a class to the element:

<ul class="menu">
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
  <li>Menu Item</li>
</ul>

<script type="text/javascript">
var myMenu = $('.menu').children('li');

myMenu.on({
  mouseenter: function() { $( this ).addClass( "is_hovered" ); },
  mouseleave: function() { $( this ).removeClass( "is_hovered" ); }
});
</script>

But I want to remove class only if mouse goes on another li, if not keep class on element.

Is this possible?

Upvotes: 1

Views: 1245

Answers (2)

Bhadresh Arya
Bhadresh Arya

Reputation: 811

This will work, when you mouse over li it will add is_hovered to li and remove from other li.

$(".menu li").mouseover(function(){
    $(".menu li").removeClass("is_hovered");
    $(this).addClass("is_hovered");
});

Upvotes: 1

Arun P Johny
Arun P Johny

Reputation: 388316

Don't use the mouseleave handler in that case, on mouseenter remove the hovered class from other elements

var myMenu = $('.menu li');

myMenu.mouseenter(function () {
    myMenu.filter('.is_hovered').removeClass("is_hovered");
    $(this).addClass("is_hovered");
});

Demo: Fiddle

Upvotes: 5

Related Questions