Problem with adding and removing classes with jQuery when hovering over a list item.
- by Andrew
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.
