JavaScriptのmouseoverとmouseoutイベントは、ユーザーがマウスカーソルを特定の要素に移動させたときや、その要素から離れたときに発生するイベントです。これらのイベントを活用することで、動的で視覚的なインタラクションをウェブページに追加することができます。今回は、それぞれの基本的な使い方から応用例までをまとめていきたいと思います。
mouseoverイベントは、マウスカーソルが要素の上に移動したときに発生します。このイベントは、子要素上にマウスカーソルが移動した場合でも発生します。
mouseoutイベントは、マウスカーソルが要素の上から離れたときに発生します。こちらも、子要素から親要素へカーソルが移動した場合でも発生する点が特徴です。
以下の例では、マウスカーソルが要素に乗ったり離れたりする際に色を変えるシンプルなスクリプトを紹介します。
See the Pen mouseover() / mouseout() by tones (@tonescodedesign) on CodePen.
const box = document.getElementById('box');
box.addEventListener('mouseover', () => {
box.style.backgroundColor = 'lightgreen';
box.textContent = 'マウスが乗りました';
});
box.addEventListener('mouseout', () => {
box.style.backgroundColor = 'lightblue';
box.textContent = 'マウスが離れました';
});<div id="box">マウスを重ねてみてください</div>#box {
width: 200px;
height: 200px;
background-color: lightblue;
text-align: center;
line-height: 200px;
font-size: 15px;
transition: background-color 0.3s;
}このコードでは、mouseoverとmouseoutイベントを使用して、ボックスの背景色とテキストを変更しています。addEventListenerメソッドでイベントを登録することで、マウスの動きに応じたインタラクションを実現しています。
mouseoverイベントは、マウスカーソルが特定の要素に重なったときにサブメニューを表示する用途でよく使用されます。以下の例では、ホバーでサブメニューを表示する実装を示します。
See the Pen mouseover() / mouseout() by tones (@tonescodedesign) on CodePen.
const menu = document.getElementById('menu');
const submenu = document.getElementById('submenu');
menu.addEventListener('mouseover', () => {
submenu.style.display = 'block';
});
menu.addEventListener('mouseout', () => {
submenu.style.display = 'none';
});<div id="menu">
<button>メニュー</button>
<div id="submenu">
<a href="#">リンク1</a>
<a href="#">リンク2</a>
<a href="#">リンク3</a>
</div>
</div>#menu {
position: relative;
display: inline-block;
}
#submenu {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: white;
border: 1px solid #ccc;
width: 150px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#submenu a {
display: block;
padding: 10px;
text-decoration: none;
color: black;
}
#submenu a:hover {
background-color: #f0f0f0;
}この例では、mouseoverイベントでサブメニューを表示し、mouseoutイベントで非表示にしています。簡単なホバー操作でメニューを制御することができます。
mouseoutイベントを活用すると、カーソルが離れたときにスムーズなアニメーションを追加できます。
See the Pen mouseover() / mouseout() by tones (@tonescodedesign) on CodePen.
const circle = document.getElementById('circle');
circle.addEventListener('mouseover', () => {
circle.style.transform = 'scale(1.2)';
});
circle.addEventListener('mouseout', () => {
circle.style.transform = 'scale(1)';
});<div id="circle"></div>#circle {
width: 100px;
height: 100px;
background-color: coral;
border-radius: 50%;
margin: 50px auto;
transition: transform 0.3s ease;
}このコードでは、マウスが円の上に乗ったときに大きくなり、離れたときに元のサイズに戻るアニメーションを追加しています。CSSのtransitionプロパティを使用してスムーズなアニメーションを実現しています。
mouseoverとmouseoutイベントを使用すると、ユーザーのマウス操作に応じたインタラクションを簡単に実現することができます。
