title: jQuery mouseenter + mouseleave + click to change separate class / styling of 3 <li>
body: <p>I have a set of 3 <code>&lt;li&gt;</code> that I need to change the class of each on <strong>mouseenter</strong>, <strong>mouseleave</strong> and <strong>click</strong>.</p>
  
  <p>So far everything is working except when I click, the 3rd <code>&lt;li&gt;</code> doesn't stay in the <strong>mouseenter</strong> state. It disappears.</p>
  
  <p><a href="http://www.fixxed.net/test/let/let-films-film.htm" rel="nofollow">click here to see how it works so far</a></p>
  
  <p>CODE:</p>
  
  <pre><code>$(function(){
      $(".hidden").hide();
  $(function(){
      $("#list ul li").mouseenter(function(){
          $(this).parent().children().first().addClass('name');
          $(this).parent().children().next().addClass('title');
          $(this).parent().children().last().show().addClass('award');
      }).mouseleave(function(){
          $(this).parent().children().first().removeClass('name');
          $(this).parent().children().next().removeClass('title');
          $(".hidden").hide();               
      }).click(function(e){
          $('.perm-name').removeClass('perm-name');
          $('.perm-title').removeClass('perm-title');
          $('.perm-award').removeClass('perm-award');
          $(this).parent().children().first().addClass('perm-name');
          $(this).parent().children().next().addClass('perm-title');
          $(this).parent().children().last().show().addClass('perm-award');
  
      }); 
      $("#list ul li").first().trigger('mouseenter');
  
  });
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.name,.perm-name { color:#454444; }
  .title,.perm-title { color:#930303; }
  .award,.perm-award { color:#454444; font-size:11px;}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div id="list"&gt;
  
            &lt;ul&gt;
              &lt;li&gt;THE KILLERS.&lt;/li&gt;
              &lt;li&gt;WHEN WE WERE YOUNG&lt;/li&gt;
              &lt;li class="hidden"&gt;(2006 Grammy Nominated, Best Long Form Video of the Year)&lt;/li&gt;
        &lt;/ul&gt;                
          &lt;ul&gt;       
              &lt;li&gt;COMMON.&lt;/li&gt;
              &lt;li&gt;TESTIFY&lt;/li&gt;
              &lt;li class="hidden"&gt;(2005 Music Award Nominated, Director of the Year)&lt;/li&gt;&lt;/
          &lt;/ul&gt;         
        &lt;ul&gt;
              &lt;li&gt;DURAN DURAN.&lt;/li&gt;
              &lt;li&gt;FALLING DOWN extended version&lt;/li&gt;
              &lt;li class="hidden"&gt;(2008 Music Award Nominated, Video of the Year)&gt;&lt;/li&gt;
          &lt;/ul&gt;            
          &lt;ul&gt;
              &lt;li&gt;ARTFUL DODGER.&lt;/li&gt;
              &lt;li&gt;short film&lt;/li&gt;
              &lt;li class="hidden"&gt;(2004 Music Award Nominated, Director of the Year)&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
   &lt;/div&gt;
  </code></pre>