Jquery - add class on hover

Question

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?

Arun P Johny · Accepted Answer · 2014-01-08 16:16:15Z

5

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

answered Jan 8, 2014 at 16:16

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

Comments

Bhadresh Arya · Accepted Answer · 2019-05-30 05:55:13Z

1

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");
});

answered May 30, 2019 at 5:55

Bhadresh Arya

8218 silver badges9 bronze badges

Collectives™ on Stack Overflow

Jquery - add class on hover

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related