Jquery - 在悬停时添加类

Question

我想当鼠标移动li jquery时向元素添加一个类:

<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>

但我只想在鼠标移到另一个 li 上时删除类，如果不是保留元素上的类。

这可能吗？

Answer 1

在这种情况下不要使用 mouseleave 处理程序，在 mouseenter 上从其他元素中删除悬停类

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

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

演示:Fiddle