$(this).addClass() not working
<p>I can do <code>$(this).children("a").addClass("class")</code> and it works fine, but when I do <code>$(this).addClass("class")</code> it is not working.  I am using <code>$(this)</code> within a mouseover function.</p>

<pre><code>$("#site nav li.hasChild").mouseover(function ()
{
    $(this).children("a").addClass("selectedTab");  // works fine
    $(this).addClass("selectedFixTab"); // does not work
    $(this).children("ul").css("display", "block");
});
</code></pre>

<p>HTML:</p>

<pre><code>&lt;header id="site"&gt;
    &lt;nav&gt;
        &lt;ul&gt;
            &lt;li id="Li1" class="hasChild"&gt;
                &lt;a href="#"&gt;Fix&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;5&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li id="Li2" class="hasChild"&gt;
                &lt;a href="#"&gt;Learn&lt;/a&gt;
                &lt;ul&gt;
                    &lt;li&gt;&lt;a href="#"&gt;1&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;2&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;3&lt;/a&gt;&lt;/li&gt;
                    &lt;li&gt;&lt;a href="#"&gt;4&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li id="Li3"&gt;
                &lt;a href="contact.htm"&gt;Contact&lt;/a&gt;
            &lt;/li&gt;
        &lt;/ul&gt;
    &lt;/nav&gt;
&lt;/header&gt;
</code></pre>

<p>CSS:</p>

<pre><code>.selectedFixTab
{
    border-top:1px solid #eb7c00;
    border-left:1px solid #eb7c00;
    border-right:1px solid #eb7c00;
}

.selectedLearnTab
{
    border-top:1px solid #2d70a3;
    border-left:1px solid #2d70a3;
    border-right:1px solid #2d70a3;
}

.selectedTab
{
    border-bottom:1px solid #fff;
}
</code></pre>
