添加/刪除類，將鼠標懸停在父類上時所有子元素的時間間隔

Question

有一些帶有子元素的元素，當您將鼠標懸停時，應在間隔之后將子元素添加到類中。

我可以添加該類能夠懸停的類，並且當我從父類中拿走鼠標時，先將其刪除，然后又由於某種原因再次將其刪除，我不知道發生了什么。

 $('.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

您需要在mouseleave事件中使用clearTimeout清除超時間隔；

 //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

使用mouseenter ，而不是mouseover：

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

與mouseenter事件不同，mouseover事件會在鼠標指針輸入任何子元素以及所選元素時觸發。 僅當鼠標指針進入所選元素時才觸發mouseenter事件。

因此，從本質上講，當您將鼠標移到子元素上時，當父元素獲得子元素移動時，它將再次重新添加所有事件。