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

<p>Here's what I tried:</p>

<p>jQuery - </p>

<pre><code>$(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");
            });
        });
</code></pre>

<p>HTML  - </p>

<pre><code>    &lt;div id="box"&gt;
        &lt;ul&gt;
            &lt;li id="Tournaments"&gt;Tournaments&lt;/li&gt;
            &lt;li id="Join"&gt;Join&lt;/li&gt;
            &lt;li id="Forums"&gt;Forums&lt;/li&gt;
            &lt;li id="GameBattles"&gt;GameBattles&lt;/li&gt;
            &lt;li id="Practice"&gt;Practice&lt;/li&gt;
        &lt;/ul&gt;
        &lt;p&gt;Hovering over: &lt;span id="results"&gt;&lt;/span&gt;&lt;/p&gt;
    &lt;/div&gt;
</code></pre>

<p>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.</p>
