Jquery - 在悬停时添加类

Question

我想当鼠标继续lijquery 时为元素添加一个类:

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

演示:小提琴