CODEWITHSUNDEEP
jquery
Cindrella
Cindrella

Reputation: 1721

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

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.

Upvotes: 0

Views: 58

Answers (2)

Tushar Gupta - curioustushar
Tushar Gupta - curioustushar

Reputation: 57095

Use 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");
        });
      });
});

Updated after OP's comment

DEMO

Use .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
    });
});

Upvotes: 2

Rituraj ratan
Rituraj ratan

Reputation: 10378

you can also use 

$(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");
        });
});

see demo reference hover and event.stopPropagation

Upvotes: 0

Related Questions