add class to li on hover but remove from all others

Question

I need to add a class to an li on hover but remove the same class from all other lis in the list (this is for a nav).

The code I have so far is:

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

I can't quite work out what I need to do...

Any help would be much appreciated.

Kindly post your HTML structure – user1608841 Jul 24 '15 at 08:51 — user1608841, Jul 24 '15 at 08:51

score 3 · Accepted Answer · edited Jul 24 '15 at 08:57

You have alternative ways to do that:

first remove class of all the elements and add one you want:

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

if they are siblings, you can use siblings:

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

score 2 · Answer 2 · edited Jul 24 '15 at 09:00

Please check the code below

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>

score 0 · Answer 3 · edited Jul 24 '15 at 08:55

0

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

});

edited Jul 24 '15 at 08:55

Tushar

85,780
21
159
179

answered Jul 24 '15 at 08:54

jrath

980
4
14

1

It's more idiomatic to use `jQuery(this)` rather than `jQuery(event.target)`. – Barmar Jul 24 '15 at 08:55

score 0 · Answer 4 · edited Jul 24 '15 at 09:14

0

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

Use above code

edited Jul 24 '15 at 09:14

Tushar

85,780
21
159
179

answered Jul 24 '15 at 08:56

user1608841

2,455
1
27
40

score 0 · Answer 5 · answered Jul 24 '15 at 08:56

0

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

answered Jul 24 '15 at 08:56

MazzCris

1,812
1
14
20

add class to li on hover but remove from all others

5 Answers5