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

Answer 2

这将起作用，当您将鼠标悬停在li上时，会将is_hovered添加到li并从其他li中删除。

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

Jquery - 在悬停时添加类

2 个答案: