【jQuery】hover()でオブジェクトへホバーした時に処理を行う!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年08月23日に投稿されました。)

jQueryで要素にマウスをかぶせた時に処理を行うにはhover()を使用します。

hover()とは、オブジェクトにマウスを重ねた(ホバリング)時に処理を行うメソッドになります。

引き数にホバリングした時の処理を指定すればよいため、こちらのメソッドを使用すると、ホバー処理の実装がとても簡単です。

また、ホバー時とホバー解除時の処理を別々にできるため、利便性がとても高く、使いやすいです。

ホバリングはPCの操作では常にあることなので、もしホバー時に処理を行いたい場合はhover()を使用するようにしましょう。

今回は、jQueryのhover()でオブジェクトへホバーした時に処理を行う方法について紹介していきます。

この記事はこんな方におすすめ

要素にマウスをかぶせた際に処理を行いたい場合

ホバリングのアニメーションを追加したい場合

hover()とは

hover()とは、オブジェクトにマウスを重ねた(ホバリング)時に処理を行うメソッドになります。

ホバーはmouseentermouseleaveのイベントになることから、マウス操作には反応しますが、タッチ操作には反応しません。

hover()の書き方

hover()の書き方は下記のようになります。

セレクターの後にhover()を追記し、必須な引数を1つ指定することで使用することができます。

また、任意な引数を1つ指定できるため、合計で2つの引数を指定して使用することもできます。

hover()の引数

hover()の引数は下記のようになります。

  1. ホバー時のイベントハンドラ(必須):
    ホバー(マウスイン)した時の処理を関数で指定する
  2. ホバー解除時のイベントハンドラ(任意):
    ホバー解除(マウスアウト)した時の処理を関数で指定する

hover()は必須な引数として「ホバー時のイベントハンドラ」を指定します。

そして、任意な引数として「ホバー解除時のイベントハンドラ」を指定することができます。

また、イベントハンドラは外部関数無名関数アロー関数のどれを指定しても構いません。

hover()でオブジェクトへホバーした時に処理を行うサンプルコード

hover()でオブジェクトへホバーした時に処理を行うサンプルコードをご紹介します。

ここでは、下記の2パターンでhover()を使用します。

  1. ホバーした時のみ処理を行う場合
  2. ホバーした時と解除した時にそれぞれ別の処理を行う場合

ホバーした時のみ処理を行う場合

ホバーした時のみ処理を行うには、hover()にホバー時のイベントハンドラを指定します。

ホバー時のイベントハンドラのみ指定することでmouseenterとmouseleaveのイベント処理が同じになります。

● index.html

● style.css

● main.js

実行結果

hover()でホバーした時のみ処理を行った結果

hover()によってオブジェクトへホバーした時に処理を行っています。

そのため、マウスが要素に重なると要素の色が変化しています。

ホバーした時と解除した時にそれぞれ別の処理を行う場合

ホバーした時と解除した時にそれぞれ別の処理を行うにはhover()にホバー解除時のイベントハンドラを追加で指定します。

ホバー解除時のイベントハンドラを指定することでmouseenterとmouseleaveのイベント処理を別々にすることができます。

● index.html

● style.css

● main.js

実行結果

hover()でホバーした時と解除した時にそれぞれ別の処理を行った結果

hover()によってオブジェクトへホバーした時に処理を行っています。

そのため、マウスが要素に重なると要素の色が青色に変化し、マウスを要素から外すと要素の色が赤色に変化しています。

hover()を使用した実際のケース

hover()を使用した実際のケースについてご紹介します。

例えば、マウスがオブジェクトにホバリングするとクルッと回転するようなコードを作成します。

● index.html

● style.css

● main.js

実行結果

hover()でクルッと回転するようなコードを作成した結果

hover()によってホバーした時に処理を行っています。

そのため、マウスをメニューに持っていくとアイコンがクルっと1回転しています。

on()を使用してオブジェクトへホバーした時に処理を行う場合

オブジェクトへホバーした時の処理は実はhover()だけででなく、on()を使用してでも行うことができます。

on()とは発生するイベントと処理を紐付けることができるメソッドであり、hover()に似たイベントを指定することで、オブジェクトへホバーした時に処理を行うことが可能になります。

しかし、on()の処理とhover()の処理では下記のような違いがあります。

  1. on()は動的に作成された要素に対しても処理を紐づけることができる
  2. hover()は動的に作成された要素に対して処理を紐づけることができない

そのため、ここではon()でオブジェクトへホバーした時に処理を行い、hover()との違いを明確にしながらご紹介します。

もし、on()について詳しく知りたい場合は下記の記事をご参考ください。

mouseenter/mouseleaveの場合

mouseenterとは、マウスがオブジェクトに重なる際に発生するイベントであり、mouseleaveとは、マウスがオブジェクトから離れる際に発生するイベントとなります。

そのため、こちらのイベントを指定することでhover()と同じような処理を実行することができます。

● index.html

● style.css

● main.js

実行結果

on()にmouseenterとmouseleaveを指定してオブジェクトへホバーした時に処理を行った結果

on()にmouseenterとmouseleaveを指定してオブジェクトへホバーした時に処理を行っています。

そのため、マウスが要素に重なると色が緑色になり、要素から外すと色が黄色に変化しています。

また、on()の場合は「追加」ボタンを押して新しく作成された要素にもホバー処理が反映されていますが、hover()の場合はホバー処理が反映されていません。

mouseover/mouseoutの場合

mouseoverとはマウスがオブジェクトに重なる際に発生するバブリングイベントとなります。

そして、mouseloutとはマウスがオブジェクトから離れる際に発生するバブリングイベントとなります。

そのため、こちらのイベントを指定することでもhover()と同じような処理を実行することができます。

● index.html

● style.css

● main.js

実行結果

on()にmouseoverとmouseoutを指定してオブジェクトへホバーした時に処理を行った結果

on()にmouseoverとmouseoutを指定してオブジェクトへホバーした時に処理を行っています。

そのため、マウスが要素に重なると色が水色になり、要素から外すと色が赤色に変化しています。

また、こちらも同様にon()の場合は「追加」ボタンを押して新しく作成された要素にもホバー処理が反映されていますが、hover()の場合はホバー処理が反映されていません。

jQuery以外でオブジェクトへホバーした時に処理を行う場合

オブジェクトへホバーした時に処理を行う方法はjQuery以外にも存在します。

そのため、ここではjQuery以外でオブジェクトへホバーした時に処理を行う方法についてご紹介します。

addEventListener()を使用する

1つ目は、addEventListener()を使用する方法です。

addEventListener()とは、イベント発生時に処理と紐付けることができるJavaScriptのメソッドになります。

そのため、hover()と類似したイベントを指定することでホバーした時に処理を行うことができます。

● index.html

● style.css

● main.js

実行結果

addEventListener()を使用してオブジェクトへホバーした時に処理を行った結果

addEventListener()にmouseenterとmouseleaveを指定してオブジェクトへホバーした時に処理を行っています。

そのため、マウスが要素に重なると色が緑色になり、要素から外れると色が黄色に変化しています。

もし、addEventListener()について詳しく知りたい場合は下記の記事をご参考ください。

:hoverを使用する

2つ目は、:hover使用する方法です。

:hoverとは、ホバーした時にスタイルを付与できるCSSの擬似クラスになります。

そのため、「クラス or ID」:hoverと指定することでホバーした時に処理を行うことができます。

● index.html

● style.css

実行結果

:hoverを使用してオブジェクトへホバーした時に処理を行った結果

:hoverでオブジェクトへホバーした時に処理を行っています。

そのため、マウスが要素に重なると色が緑色になり、要素から外れると色が黄色に変化しています。

まとめ

⚫︎ hover()とはマウスがオブジェクトに重なった(ホバリング)時に処理を行うメソッドである

⚫︎ hover()は下記の引数を指定して使用する。
・ホバー時のイベントハンドラ(必須)
・ホバー解除時のイベントハンドラ(任意)

⚫︎ホバーした時のみ処理を行うには、hover()にホバー時のイベントハンドラを指定する。

⚫︎ ホバーした時と解除した時にそれぞれ別の処理を行うにはhover()にホバー解除時のイベントハンドラを指定する。

⚫︎ on()を使用してオブジェクトへホバーした時に処理を行うには下記のイベントを使用する。
(on()は動的に作成された要素に対しても処理を紐づけることができるがhover()は動的に作成された要素に対して処理を紐づけることができない)
・mouseenter/mouseleave
・mousein/mouseout

⚫︎ jQuery以外でオブジェクトへホバーした時に処理を行うには下記の2つの方法がある。
・JavaScriptのaddEventListener()を使用する
・CSSの:hoverを使用する