[Javascript] jQueryのhoverイベントが意外に便利だった

こんにちは、@yoheiMuneです。
人のコードを見ていて初めて知ったのですが、jQueryにはhoverイベントがあるんですね。なかなか便利だったので今日はそれについてブログを書きたいと思います。

目次

jQueryのホバーイベント

jQueryのホバーイベントは、以下のように利用することができます。

$(element).hover(hoverInの処理, hoveroutの処理);

例えば以下のような実装が可能です。

HTML

<div id="myBox" style="display:inline-block; border:1px solid red; padding: 10px; background:yellow;">
    <div style="width:100px; height:100px; background:blue;"></div>
</div>

// hoverInの処理
var handleHoverIn = function() {
    $(this).css('border-width', '10px');
}
// hoverOutの処理
var handleHoverOut = function() {
    $(this).css('border-width', '1px');   
}
// Hoverイベントを設定する.
$('#myBox').hover(handleHoverIn, handleHoverOut);

以下がサンプルです。


ここでのポイントは、内側のdiv（青色のエリア）にマウスが入ってもホバーが切れない（handleHoverOut関数が呼ばれない）ことです。通常のmouseXXXで実装してしまうと、青色エリアに入るとhandleHoverOutが呼ばれてしまうので、それが嫌な場合に今回のhoverが便利です。

hoverの解除方法

これについて日本語記事があんまりなかったので、残しておきたいと思います。hoverイベントの解除はmouseenterとmouseleaveを解除することで、hoverイベントを解除できます。

$('#myBox').off('mouseenter mouseleave');

最後に

jQueryにはまだまだ知らない便利機能が多いですね。人のコードを読んでいて学ぶことが多いです。また気づいたらブログに書きたいと思います。

最後になりますが本ブログでは、フロントエンド・Go言語・Node.js・Python・Linux・開発関連・Swift・Java・機械学習など雑多に情報発信をしていきます。自分の第2の脳にすべく、情報をブログに貯めています。気になった方は、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！