jQuery 特定要素を指定時間以上hoverしたら実行

この記事は3年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。Toshikuraです。今回のTipsは【jQuery 特定要素を指定時間以上hoverしたら実行】です。特定要素をホバーで表示/非表示することは良くある事かと思います。ただ通常のhoverの記述ですとスクロールで通りすぎるだけで反応したり、マウスをすこし乗せただけで反応するような微妙な部分があります。ここではひとつの回避方法をメモしておきます。

実装方法

例では特定要素を0.5秒以上ホバーした場合にfadeInするようにしています。詳しくはMDN|window.setTimeoutリファレンスをご参照ください。

HTML
<a id="btn">HOVER</a>
<div id="tgt">…</div>
JS
$(function() {
$(‘#btn’).on({
‘mouseenter’:function(){
sethover = setTimeout(function(){
$(‘#tgt’).fadeIn(300);
},500);
},
‘mouseleave’:function(){
$(‘#tgt’).fadeOut(300);
clearTimeout(sethover);
}
});
});

//もしくは…

$(function() {
$(‘#btn’).hover(function() {
sethover = setTimeout(function(){
$(‘#tgt’).fadeIn(300);
},500);
}, function() {
$(‘#tgt’).fadeOut(300);
clearTimeout(sethover);
});
});

以上になります。