jquery - Adding class to sub element on mouseenter, the class is also added to parent element in jquery

Question

I want to add a class to an li element which is sub element of an li.

<div id="test" class="list">
<ul>
  <li><a id="Inbox">Inbox</a>
    <ul></ul>
  </li>
<li><a id="Sent">Sent</a>
    <ul></ul>
  </li>
<li><a id="Archive">Archive</a>
    <ul></ul>
  </li>
<li><a id="Deleted">Deleted</a>
  <ul>
      <li><a id="Subfolder1">Sub Folder 1</a></li>
    </ul>
 </li>
</ul>
</div>

Mouse enter and Mouse leave functions:

$('#test li').each(function(){
    $(this).on("mouseenter",function(){
      $(this).addClass("enter-folder");
    });
    $(this).on("mouseleave",function(){
      $(this).removeClass("enter-folder");
    });
  });

When mouse is on subfolder1 the class is adding to subfolder1 li elemnt as well as the parent li element which has text deleted.

Fiddle: http://jsfiddle.net/UVJgF/36/

I just want to add class to subfolder1 when mouse is on subfolder1.

How to fix this issue.

Answer 1

使用event.stopPropagation

$(document).ready(function () {
    $('#test li').each(function(){
        $(this).on("mouseenter",function(e){
            e.stopPropagation(); //added here
          $(this).addClass("enter-folder");
        });
        $(this).on("mouseleave",function(e){
            e.stopPropagation(); //added here
          $(this).removeClass("enter-folder");
        });
      });
});

OP评论后更新

演示

使用.hover()

$(document).ready(function () {
    var li = $('#test li');
    li.hover(function (e) {
        e.stopPropagation(); //added here
        li.removeClass("enter-folder")//added here to remove class from all li items
        $(this).addClass("enter-folder");
    }, function (e) {
        e.stopPropagation(); //added here
        li.removeClass("enter-folder");//added here to remove class from all li items
    });
});

Answer 2

你也可以使用

$(document).ready(function () {
     $('#test li').hover(function(e){
            e.stopPropagation();
          $('#test li').removeClass("enter-folder");
           $(this).addClass("enter-folder");
        },function(e){
            e.stopPropagation(); 
          $(this).removeClass("enter-folder");
        });
});

参见演示 参考hover和event.stopPropagation