jQueryのマウスオーバー・マウスアウトイベント【現役エンジニアが解説】

PROGRAM

今回は、jQueryのマウスオーバー・マウスアウトイベントについて、簡単に解説していきます。

マウスオーバーイベント

マウスオーバーイベントはmouseenterメソッドで検知できます。

これはjQuery独自のメソッドではなくJavaScriptから既にあります。

$('#hoge').mouseenter(function() {
  // 処理を書く
});

上記のコードでは、hogeのidの要素のマウスオーバーイベント時に処理を実行させます。

マウスアウトイベント

マウスアウトイベントはmouseleaveメソッドで検知可能です。

これもjQuery特有のメソッドではなく、JavaScriptからあります。

$('#hoge').mouseleave(function() {
  // 処理を書く
});

上記の例では、idがhogeの要素のマウスアウトイベント時に処理を実行させます。

hoverメソッド

jQueryではマウスオーバーとマウスアウトイベントを両方検知できます。

hoverメソッドでは、第一引数にマウスオーバー時、第二引数にマウスアウト時の処理を登録できます。

$('#hoge').hover(
  function() {
    // マウスオーバー時の処理
  },
  function() {
    // マウスアウト時の処理
  }
);

上記のコードの例では、hogeというidを持つ要素のマウスオーバー時とマウスアウト時の処理を同時に登録します。