JavaScriptのonmouseover・onmouseoutとは？マウス操作で発生するイベントをわかりやすく解説
onmouseover と onmouseout は、マウスカーソルが要素に重なったとき、または離れたときに発生するイベントです。
リンク・画像・ボタンなど、ページ上のほとんどの要素で利用できます。
onmouseoverイベントとは？
onmouseover は、マウスカーソルが要素の上に乗った瞬間に発生するイベントです。
リンクの色変更、画像の切り替え、説明文の表示などに使われます。
使用例：リンクにマウスが重なったときに処理を実行
<a href=”javascript:void(0)” onmouseover=”mover()”>リンク</a>
→ マウスがリンクに乗った瞬間に mover() 関数を実行します。
onmouseoutイベントとは？
onmouseout は、マウスカーソルが要素から離れたときに発生するイベントです。
マウスオーバーで変化させた内容を元に戻すときなどに利用されます。
使用例：リンクからマウスが離れたときに処理を実行
document.links[0].onmouseout = msg;
→ 最初のリンクからマウスが離れたら msg() を実行します。
onmouseover と onmouseout の組み合わせ例
マウスが乗ったときに強調し、離れたら元に戻す例です。
<a href=”#”
onmouseover=”this.style.color=’red'”
onmouseout=”this.style.color=’black'”>
マウス操作の例
</a>
onmouseover=”this.style.color=’red'”
onmouseout=”this.style.color=’black'”>
マウス操作の例
</a>
→ シンプルなホバー効果を JavaScript だけで実現できます。
実際のサンプル
<img src=”sample.jpg” width=”200″
onmouseover=”this.style.opacity=0.6″
onmouseout=”this.style.opacity=1″>
onmouseover=”this.style.opacity=0.6″
onmouseout=”this.style.opacity=1″>
→ マウスが乗ると画像が半透明になり、離れると元に戻る例です。
まとめ
onmouseover：マウスが要素に重なったときに発生onmouseout：マウスが要素から離れたときに発生- リンク・画像・ボタンなどほぼ全ての要素で利用可能
- ホバー効果・説明表示・画像切り替えなどに便利
