title: Adding class to sub element on mouseenter, the class is also added to parent element in jquery
body: <p>I want to add a class to an li element which is sub element of an li.</p>
  
  <pre><code>&lt;div id="test" class="list"&gt;
  &lt;ul&gt;
    &lt;li&gt;&lt;a id="Inbox"&gt;Inbox&lt;/a&gt;
      &lt;ul&gt;&lt;/ul&gt;
    &lt;/li&gt;
  &lt;li&gt;&lt;a id="Sent"&gt;Sent&lt;/a&gt;
      &lt;ul&gt;&lt;/ul&gt;
    &lt;/li&gt;
  &lt;li&gt;&lt;a id="Archive"&gt;Archive&lt;/a&gt;
      &lt;ul&gt;&lt;/ul&gt;
    &lt;/li&gt;
  &lt;li&gt;&lt;a id="Deleted"&gt;Deleted&lt;/a&gt;
    &lt;ul&gt;
        &lt;li&gt;&lt;a id="Subfolder1"&gt;Sub Folder 1&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
   &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Mouse enter and Mouse leave functions:</p>
  
  <pre><code>$('#test li').each(function(){
      $(this).on("mouseenter",function(){
        $(this).addClass("enter-folder");
      });
      $(this).on("mouseleave",function(){
        $(this).removeClass("enter-folder");
      });
    });
  </code></pre>
  
  <p>When mouse is on subfolder1 the class is adding to subfolder1 li elemnt as well as the parent li element which has text deleted.</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/UVJgF/36/" rel="nofollow">http://jsfiddle.net/UVJgF/36/</a></p>
  
  <p>I just want to add class to subfolder1 when mouse is on subfolder1.</p>
  
  <p>How to fix this issue.</p>