JavaScriptでhoverイベントを実装する方法について解説!

・JavaScriptでhoverイベントを実装したいけど、やり方がわからない。
・mouseoverイベントって何?
・具体的な使い方やイベントの実装方法を知りたい!

CSSのhoverイベントをJavaScriptで実装するには、mouseoverイベントを使うことができますが、使い方を知らない人もいるでしょう。

そこでこの記事では、JavaScriptでhoverイベントを実装する方法について詳しく解説します!

この記事を読めば、JavaScriptのmouseoverイベントの使い方を理解することができ、hover時のイベントを実装することができるでしょう。

JavaScriptでhoverイベントを実装したいけどやり方がわからない、mouseoverイベントについて知りたい人は、ぜひ最後までご覧ください。

JavaScriptでhoverイベントを実装する方法

CSSで要素にhoverを指定すると、その要素はマウスが上に乗ったとき、スタイルを変えることができますよね。

この処理をJavaScriptで実装することができないのか、疑問に思う人もいるでしょう。

実はJavaScriptでは、mouseoverイベントを使うことで、hoverと同じ動きを実装することができます。

では、mouseoverイベントとは一体何なのか、どのように使うのか、詳しく見ていきましょう。

mouseoverイベントとは

mouseoverイベントとは、addEventListenerで指定できるイベントの1つで、指定の要素にマウスが乗った際に発生するイベントです。

addEventListenerは、様々なイベントリスナーを登録するためのメソッドで、その中でもmouseoverと呼ばれるイベントを指定することで、hoverしたときのイベントを実装することができます。

例えば、要素の上にマウスが乗ったときに背景色が変わる挙動や、文字が表示されるなどの挙動です。

JavaScriptのmouseoverイベントでは、ただスタイルを変更するだけでなく、応用すれば様々な挙動を実装することができます。

mouseoverイベントを駆使することによって、より動的なサイトを作成することができるようになるので、使い方をしっかりと理解していきましょう。

JavaScriptを使いこなす!イベントリスナーの解説

mouseoverイベントの使い方

では、実際にmouseoverイベントの使い方について解説していきます。

mouseoverイベントの書き方は次の通りです。

hoverイベントを実行させたい要素に、「addEventListener」を指定します。

そして、イベントの種類はmouseoverを指定します。

このように、addEventListenerにmouseoverイベントを指定するだけで、マウスが要素に乗った際の実装をすることができます。

今回は例として、以下のようなイベントを作ってみましょう。

まずHTMLでは、idが「box」のdivタグがあります。

このdivタグにmouseoverイベントを発生させたいので、変化をわかりやすくするために、高さと幅を100pxに指定し、背景色をgreyにしています。

そして、JavaScriptでは、id「box」をgetElementByIdで取得し、addEventListenerを指定します。

addEventListenerのイベントはmouseoverとし、イベントの処理として「box.style.backgroundColor = ‘orange’」と指定します。

これは、マウスが「box」に乗ったとき、背景色が「grey」から「orange」に変わるようなイベントです。

MEMO
JavaScriptでは「-」ハイフンを使えないので、「background-color」ではなく、「backgroundColor」となっているところに注意しましょう。

これで結果をブラウザで表示して、確認してみましょう。

要素の上にマウスを乗せると、背景色がオレンジ色に変わりましたね。

この結果から、mouseoverイベントによってスタイルが変更されたのがわかります。

このように、mouseoverイベントを指定することで、CSSのhoverのようなイベントを実装することができます。

hover時のみイベントが発生するようしてみる

ここまでで、mouseoverイベントの使い方がわかり、マウスが要素に乗った際の挙動を実装することができました。

しかし、先ほどの実行結果では、マウスを要素の上に乗せた時点から、ずっと背景色がオレンジ色のままです。

これをhoverしているときだけ背景色を変え、hoverしていないときは元の背景色を保つ、という挙動に変えてみたいと思います。

マウスが要素の上から離れた際の挙動を実装するためには、mouseleaveというイベントを指定します。

先ほど、addEventListenerでmouseoverイベントを指定した後に、もう1つ処理を書いていきます。

divタグのidを取得した「box」にaddEventListenerでmouseleaveイベントを指定します。

そして、mouseleaveイベントの処理として、「box.style.backgroundColor = ‘grey’」と指定しましょう。

これは、マウスが要素から離れたときに、boxの背景色を「orange」から「grey」に戻しています。

結果をブラウザで表示して、どのようになるのか確認してみましょう。

要素の上にマウスを乗せると背景色はオレンジ色になり、マウスを離すと背景色は灰色になりました。

この結果から、mouseleaveイベントによって、マウスが離れた際の挙動も実装できたということがわかります。

このように、mouseoverやmouseleaveといったイベントを使うことで、hover時のイベントを発生させることができます。

JavaScriptで動的なサイトを作る際にとても便利なので、使い方を覚えておきましょう。

まとめ

今回は、JavaScriptでhoverイベントを実装する方法について解説しました。

JavaScriptでは、addEventListenerのmouseoverイベントを使ってhoverを実装することができます。

mouseoverイベントは、マウスが要素の上に乗ったときに発生するイベントです。

その際にスタイルを変更することで、動的な実装をすることができるので、使い方を覚えておきましょう。

この記事がJavaScriptの学習に役立つと幸いです。