Selecting an element whose parent element does not have a particular class
<p>Assuming, I have the following HTML:</p>

<pre><code>&lt;ul class="topnav"&gt;
    &lt;li class=""&gt;&lt;a href="/"&gt;Page 1&lt;/a&gt;&lt;/li&gt;
    &lt;li class=""&gt;&lt;a href="/Page2/"&gt;Page 2&lt;/a&gt;&lt;/li&gt;
    &lt;li class=""&gt;&lt;a href="/Page3/"&gt;Page 3&lt;/a&gt;&lt;/li&gt;
    &lt;li class=""&gt;&lt;a href="/Page4/"&gt;Page 4&lt;/a&gt;&lt;/li&gt;
    &lt;li class=""&gt;&lt;a href="/Page5/"&gt;Page 5&lt;/a&gt;&lt;/li&gt;
    &lt;li class="active"&gt;&lt;a href="/Page6/"&gt;Page 6&lt;/a&gt;&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>When the mouse leaves the LI element, it is suppose change the color of the font back to grey except for the A element whose parent LI has a class value of 'active'.</p>

<p>Below is the JQuery code I am trying: (The 'mouseleave' function is not working)</p>

<pre><code>        $(".top_nav li a").mouseenter(
            function() {
                $(this).stop().animate({'color': '#ffffff'}, 'slow');
        });

        $(".top_nav li a").mouseleave(
            function() {
                $(this).parent().not(".active").stop().animate({'color': '#a5acb2'}, 'slow');
        });
</code></pre>
