title: jquery click/mouseenter/mouseleave change class
body: <p>I am tring do some effect. the defualt select word is the first li.  </p>
  
  <pre><code>ul {
      list-style: none
  }
  .a-c {
      color: #c10603;
      cursor: pointer
  }
  </code></pre>
  
  
  
  <pre><code>&lt;ul&gt;
      &lt;li class="a a-c"&gt;list1&lt;/li&gt;
      &lt;li class="a"&gt;list2&lt;/li&gt;
      &lt;li class="a"&gt;list3&lt;/li&gt;
      &lt;li class="a"&gt;list4&lt;/li&gt;
      &lt;li class="a"&gt;list5&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>when I click another li, the default will change. some code working well.</p>
  
  <pre><code>$('body').on('click','.a', function(){
      $('.a-c').removeClass('.a-c');
      $(this).addClass('.a-c')
  });
  </code></pre>
  
  <p>Now I need another effect, when mouse hover li, the defaut li will change color into black,  and the one which mouseenter will change color into the <code>color:#c10603</code>, some code also working.</p>
  
  <pre><code>$('body').on('mouseenter','.a', function(){
      $(this).addClass('a-c')
  });
  $('body').on('mouseleave','.a', function(){
      $('.a').removeClass('a-c')
  });
  </code></pre>
  
  <p>But I also need, if mouseleave all the li, the defult li will still show color as <code>#c10603</code></p>
  
  <p>Some online code here <a href="http://jsfiddle.net/3rvd8qwf/1/" rel="nofollow">http://jsfiddle.net/3rvd8qwf/1/</a>  my problem is when i click another li and mouseleave all the li, the defualt li should change into the one which I clicked, not always the first one. Thanks.</p>