title: Selecting an element whose parent element does not have a particular class
body: <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>