在悬停时将 class 添加到 li，但从所有其他人中删除

Question

我需要在悬停时将 class 添加到 li，但从列表中的所有其他 li 中删除相同的 class（这是针对导航).

我目前的代码是：

jQuery(".navcontent").on('mouseenter', 'li', function() {
    if (jQuery('.childmenu', this)) {
        jQuery('.childmenu', this).addClass("child-active");
    } else {
        jQuery('.navcontent li .childmenu').removeClass("child-active");
    }
});

我不太清楚我需要做什么...

如有任何帮助，我们将不胜感激。

Answer 1

jQuery(".navcontent li").on('mouseenter', function(event) {
    jQuery('.navcontent li .childmenu').removeClass("child-active");
    jQuery(event.target).addClass("child-active");

});

Answer 2

您有其他方法可以做到这一点：

首先删除所有元素中的 class，然后添加一个你想要的元素：

    jQuery(".navcontent li").on('mouseenter', function() {
        jQuery('.childmenu').removeClass("child-active");
        jQuery('.childmenu', this).addClass("child-active");
    });

如果他们是兄弟姐妹，你可以使用siblings:

    jQuery(".navcontent li").on('mouseenter', function() {
        jQuery('.childmenu', this).addClass("child-active")
          .siblings('.childmenu').removeClass("child-active");
    });

Answer 3

jQuery(".navcontent li").on('mouseover', function() {
    jQuery(".navcontent li .childmenu").removeClass('child-active');
    jQuery(this).addClass('child-active');
});

使用上面的代码

Answer 4

jQuery(".navcontent li").on('mouseenter', function() {
    jQuery(".navcontent li").removeClass("child-active");
    jQuery(this).addClass("child-active");
});

Answer 5

请检查下面的代码

jQuery(".navcontent li").on('mouseenter', function(event) {
  jQuery('.navcontent li').removeClass("child-active");
  jQuery(this).addClass("child-active");

});

.child-active {
  color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<ul class="navcontent">
  <li>Links</li>
  <li>Links</li>
  <li>Links</li>
  <li>Links</li>
  <li>Links</li>
</ul>

在悬停时将 class 添加到 li，但从所有其他人中删除

add class to li on hover but remove from all others

javascript

css

jquery

hover

mouseenter