添加/删除类，将鼠标悬停在父类上时所有子元素的时间间隔

Question

There are some elements with child elements, when you hover, child elements should be added to the class after interval.

I can add the class was able to hover, and when I take away the mouse from the parent class is removed first, and then again for some reason added, I do not understand what was going on.

 $('.field_icon') .mouseover(function() { $(this).children('.field-item').each(function(i, el) { setTimeout(function() { $(el).addClass('active'); }, 100 + (i * 300)); }) }) .mouseleave(function() { $(this).children('.field-item').removeClass('active') }) 

 .field-item { display: inline-block; width: 50px; height: 50px; background: #7CB342; } .field-item.active { background: #FF9800; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="field_icon"> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> </div> <div class="field_icon"> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> </div> <div class="field_icon"> <div class="field-item"></div> <div class="field-item"></div> </div> <div class="field_icon"> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> </div> 

Answer 1

You need to clear the timeout interval using clearTimeout in the mouseleave event;

 //Declare an empty array to store the timeoutID var t = []; $('.field_icon') .mouseover(function() { $(this).children('.field-item').each(function(i, el) { //store the reference in a variable var t1 = setTimeout(function() { $(el).addClass('active'); }, 100 + (i * 300)); //Push it the array t.push(t1); }) }) .mouseleave(function() { //iterate and Clears the delay set setTimeout t.forEach(clearTimeout); //reset array to emepty t.length = 0; $(this).children('.field-item').removeClass('active') }) 

 .field-item { display: inline-block; width: 50px; height: 50px; background: #7CB342; } .field-item.active { background: #FF9800; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="field_icon"> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> </div> <div class="field_icon"> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> </div> <div class="field_icon"> <div class="field-item"></div> <div class="field-item"></div> </div> <div class="field_icon"> <div class="field-item"></div> <div class="field-item"></div> <div class="field-item"></div> </div> 

Answer 2

Use mouseenter , not mouseover:

http://www.w3schools.com/jquery/event_mouseover.asp

Unlike the mouseenter event, the mouseover event triggers if a mouse pointer enters any child elements as well as the selected element. The mouseenter event is only triggered when the mouse pointer enters the selected element.

So, essentially, when you move the mouse over the child elements, it re-adds all the events again as the parent element gets the child element moveover.