Problem with adding and removing classes with jQuery when hovering over a list item

Question

I want to add a class to a list item when I hover over it, and then remove it and add it to a different list item if a different list item is hovered over.

Here's what I tried:

jQuery -

$(document).ready(function() {
        $("#results").text("Tournaments");
        $("#Tournaments").addClass("box-active");
        $("#box ul li").hover(function() {
            var show = $(this).attr('id');
            $("#results").text(show);
            $("#box ul li").each(function() {
                $(this).removeClass("box-active");
                });
            $("#box ul li#" + show).addClass("box-active");
            });
        });

HTML -

    <div id="box">
        <ul>
            <li id="Tournaments">Tournaments</li>
            <li id="Join">Join</li>
            <li id="Forums">Forums</li>
            <li id="GameBattles">GameBattles</li>
            <li id="Practice">Practice</li>
        </ul>
        <p>Hovering over: <span id="results"></span></p>
    </div>

When I hover over an item, it changes the class, but if I hover over I different one it removes the class over the item I first hovered over, but doesn't add the class to the new item I'm hovering over. Not sure why, and any help would be appreciated.

Community · Accepted Answer · 2017-05-23 12:04:24Z

1

I think the answer to this question may help.

Could be something like this:

   $('#box ul li').hover( function(){
      $(this).addClass('box-active');
      $("#results").text($(this).attr('id'));
   },
   function(){
      $(this).removeClass('box-active');
      $("#results").text('');
   });

EDIT: this will remove the class when you stop hovering over the li, not sure if that's your desired functionality or not

edited May 23, 2017 at 12:04

CommunityBot

11 silver badge

answered May 24, 2010 at 0:14

derek

4,8961 gold badge25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kerry Jones · Accepted Answer · 2010-05-24 00:15:57Z

0

For one, no reason to put multiple id tags in a search try:

$("li#" + show).addClass("box-active");

but even better, since you are in the li itself:

$(this).addClass('box-active');

I'm not sure if this will work, but try this:

$(document).ready(function() {
    $("#results").text("Tournaments");
    $("#Tournaments").addClass("box-active");
    $("#box ul li").hover(function() {
        $("#results").text( $(this).attr('id') );
        $("#box ul li.box-active").removeClass('box-active');
        $(this).addClass('box-active');
    });
});

answered May 24, 2010 at 0:15

Kerry Jones

21.8k12 gold badges67 silver badges89 bronze badges

Collectives™ on Stack Overflow

Problem with adding and removing classes with jQuery when hovering over a list item

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related