セットアップの遅延MouseOut on function

Question

マウスにその要素を残すときにこの遅延を追加する必要がありますか？その内部で動作していないのsetTimeoutの "if"： -/

$('#tools .has-tooltip').on('mouseover', function() { 
    $('#tools .has-tooltip').removeClass('hover') 
    $(this).addClass('hover'); 
}).on('mouseout', function (e) { 
    if ((!$(e.target).is('input')) && (!$('input').is(":focus"))) { 
     $(this).removeClass('hover'); 
    } 
}); 

Answer 1

（私はあなたの代わりにCSSのここ:hoverルールをJavaScriptを使用するには十分な理由があるとします。）

setTimeout動作します - あなたがしていますおそらくthisのコンテキストを失ってしまいます。あなたはES6の書式を使用することができる場合は、脂肪の矢印機能を既存のthisを保存することができます。

var timeoutID = false; // We'll use this to cancel any existing timeouts before setting a new one 
 

 
$('#tools .has-tooltip').on('mouseover', function() { 
 
    if (timeoutID) { 
 
    window.clearTimeout(timeoutID); 
 
    } 
 

 
    $('#tools .has-tooltip').removeClass('hover') 
 
    $(this).addClass('hover'); 
 
}).on('mouseout', function(e) { 
 
    if ((!$(e.target).is('input')) && (!$('input').is(":focus"))) { 
 
    timeoutID = window.setTimeout(() => { 
 
     $(this).removeClass('hover'); 
 
    }, 1000); 
 
    } 
 
});

.hover { 
 
    background-color: #FFC 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="tools"> 
 
    <div class="has-tooltip">Hover me</div> 
 
</div>

また

、setTimeout関数で使用することができ、一時変数に格納this：

... 
var self = this; 
window.setTimeout(function() { 
    $(self).removeClass('hover'); 
},1000); 
...