【jQuery】mouseover()でマウスオーバーした時の処理を行う!

マウスオーバーした時に処理を行うにはjQueryのmouseover()メソッドを使用します。

jQueryのmouseover()メソッドとは要素とマウスが重なった時に処理を行うメソッドであり、要素の上にマウスを持っていく時の処理に使用されます。

Webサイトやホームページでもメニューやボタンの上でマウスを持っていくと、色が変わったり少し透明になったりすることがあるかと思いますが、それらはmouseoverのイベントが行われています。

今回は、jQueryのmouseover()メソッドを使ってマウスオーバーした時の処理を行う方法について以下の内容で解説していきます。

⚫︎ マウスオーバー時の処理を行うサンプルコード
⚫︎ マウスオーバー時にイベントを発生させる場合
⚫︎ マウスオーバー時にデータを渡し、イベントを発生させる場合

⚫︎ パラメータなしでmouseover()を使用する場合
⚫︎ mouseover()とmouseup()の違い

ハルトさん

今回はjQueryのmouseover()メソッドでマウスオーバーした時の処理を行う方法について説明していきます。

さとみさん

お願いします!

mouseover()とは

mouseover()とは、要素がマウスによるクリック操作を行うことで、イベント処理を実行するメソッドとなります。

mouseover()の書き方

mouseover()メソッドの書き方は下記となります。

パラメータ

⚫︎ イベントデータ:
イベントオブジェクトに渡すデータを指定する
(変数やマップ値のようにオブジェクトリテラル式で指定)
⚫︎ イベントハンドラ:
クリックしたときのイベントを指定する

mouseover()のパラメータにイベントハンドラを指定することで、要素をクリックした時に指定したイベント処理を行うことができます。
また、パラメータにイベントデータを指定することで指定したイベントハンドラにデータを渡すことができます。

マウスオーバーした時の処理を行うサンプルコード

mouseover()でマウスオーバーした時の処理を行うサンプルコードを紹介します。

マウスオーバー時にイベントを発生させる場合

マウスオーバー時にイベントを発生させる場合はmouseover()のパラメータにイベントハンドラを指定します。

sample.html

style.css

index.js

出力結果

mouseover()にイベントハンドラを指定することでクリック後にイベント処理を行っています。
そのため、ボタンを押すと指定したoutクラスに文字列が表示され、sampleクラスの背景色が変更されています。

マウスオーバー時にデータを渡し、イベントを発生させる場合

マウスオーバー時にデータを渡し、イベントを発生させる場合はmouseover()のパラメータにイベントデータとイベントハンドラを指定します。

sample.html

style.css

index.js

出力結果

mouseover()のパラメータにイベントデータを指定することでマウスオーバー時にデータの受け渡しを行っています。
そのため、data1変数のデータがマウスオーバー時に表示されています。

さとみさん

mouseover()のパラメータにイベントデータを指定することでクリック処理時にデータの受け渡しを行うことができるのですね!

ハルトさん

そうですね。
また、let obj = {old: 50 ,name: ‘Haruto’}のようなマップ値にして複数のデータの受け渡しも可能ですよ。

パラメータ無しでmouseover()を使用する場合

パラメータ無しでmouseover()を使用すると、パラメータの中には何も指定していない為、何もおきません。
しかし、下記のコードのようにパラメータ無しのmouseover()を使用することができます。

sample.html

style.css

index.js

出力結果

objectAクラスのmouseover()内でobjectBクラスのmouseover()を呼び出すことで、objectAクラスにマウスを重ねるとobjectBクラスもマウスを重ねたことになります。
そのため、objectAにマウスオーバーすると、objectBもマウスオーバーしたこととなり背景色が変更されます。

さとみさん

mouseover()はパラメータが無い状態で単独では使用できませんけど、他のメソッドで呼び出してもらうと使用することができるのですね!

ハルトさん

そうですね。
サンプルコードでは、objectAのmouseover()のイベントハンドラ内でobjectBのmouseover()を実行しています。
これにより、objectAでマウスを重ねた時にobjectBにマウスを重ねていなくてもマウスオーバの処理が実行されます。

mouseover()とmouseenter()の違い

mouseover()とは別にmouseenter()を使用してもマウスを重ねた場合に処理を行うことができます。
その為、mouseover()とmouseenter()は同じようなイベントのように感じますが、少し異なる点があります。

それは「マウスを重ねた時にどこの要素までが処理の対象か」ということです。

さとみさん

「マウスを重ねた時にどこの要素までが処理の対象か」というのはどういうことですか?

ハルトさん

言葉だけではわかりづらいですよね。
その為、違いが分かりやすいようmouseover()とmouseenter()のサンプルコードを見て見ましょう。

sample.html

style.css

index.js

出力結果

mouseover()を使用した場合は、子要素にもマウスを重ねるとイベントが発生しますが、mousenter()は子要素にマウスを重ねるとイベントが発生しません。
その為、mouseover()の場合は、子要素にマウスを重ねると現在時間を取得していますが、mousenter()の場合は子要素にマウスを重ねると現在時間を取得していません。

さとみさん

mouseover()の場合は子要素にもマウスを重ねるとイベントが発生してますけど、mouseenter()の場合は子要素にマウスを重ねるとイベントが発生してませんね!
こうしてみると違いが判断できますけど、実際にぱっと見てもどこが違うのか判断できませんね!

ハルトさん

そうですよね。
mouseover()とmouseenter()は目で見ても違いがわかりませんよね。
もし、このように類似しているメソッドの違いを明確にしたいのであれば、コンソールに残したりするとメソッドの差が分かりやすくなりますよ。

今回のポイント

mouseover()でクリック処理を行う

⚫︎ マウスオーバーした時の処理を行うにはjQueryのmouseover()メソッドを使用する

⚫︎ マウスオーバーした時にイベント処理を行う場合はmouseover()のパラメータにイベントハンドラ(関数)を指定する

⚫︎ マウスオーバーした時にデータの受け渡しを行う場合はmouseover()のパラメータにイベントデータとイベントハンドラ(関数)を指定する

⚫︎ mouseover()はパラメータ無い場合はクリック処理は行われないが、指定したセレクタのクリック処理がある状態で、別の要素からmouseover()が呼び出されている状態だと処理が行われる

⚫︎ mouseover()とmouseenter()の違いはをマウスを重ねた時にどこの要素まで処理を行うかということである
(mouseover()は指定した要素の子要素まで処理を行うが、mouseenter()は指定した要素のみ処理を行い、子要素は対象ではない)

Writer
壷井

壷井

株式会社flyhawkの壷井です。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語:swift、JS系(Node.js等)。好きなサーバー:AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

最新の案件情報

フリーランスエンジニアの案件探し