title: jQuery mouseenter mouseleave hover bug
body: <p>I'm attempting to apply an opacity change on my LI elements by toggling the 'active' class, but neither mouse events or hover are working.  Looks like a simple fix but i can't figure out why.  </p>
  
  <p>jquery</p>
  
  <pre><code>$( document ).ready(function() {
    $('nav.li').mouseenter(function() {
      $(this).addClass("active");
    });
  
    $('nav.li').mouseleave(function() {
      $(this).removeClass("active");
    });
  
    $("nav.li").hover(function () {
      $(this).toggleClass("active");
    });
  });
  </code></pre>
  
  <p>css</p>
  
  <pre><code>nav.li.active {
    opacity: .7;
  }
  </code></pre>
  
  <p>html</p>
  
  <pre><code>&lt;nav&gt;
    &lt;ul&gt;
      &lt;li class="about_link"&gt;...&lt;/li&gt;
      &lt;li class="contact_link"&gt;...&lt;/li&gt;
      &lt;li&gt;...&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>Thanks</p>