は追加/あなたが子要素を持ついくつかの要素がありますが、親

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、マウスオーバーではない：マウスポインタがどの子要素を入力した場合MouseEnterイベントとは異なり

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

、mouseoverイベントがトリガさとして選択された要素と同様に。 mouseenterイベントは、マウスポインタが選択された要素に入るときにのみトリガされます。

したがって、基本的に、子要素の上にマウスを移動すると、親要素が子要素の移動を取得するため、すべてのイベントが再度追加されます。