はじめに
この記事を読めば、JavaScriptでマウスオーバーを使った様々な効果を実装することができるようになります。
初心者向けに、基本的な使い方から応用例、カスタマイズ方法、注意点などを徹底解説していきます。
サンプルコードを参考にしながら、自分のウェブページにマウスオーバーの魅力を取り入れてみましょう！
●JavaScriptとは
JavaScriptは、ウェブページにインタラクティブな機能を追加するためのプログラミング言語です。
HTMLやCSSと組み合わせて使われることが多く、ブラウザ上で実行されるため、ユーザーの体験を向上させることができます。
今回は、その中でもマウスオーバーを利用した機能を解説していきます。
●マウスオーバーとは
マウスオーバーとは、マウスカーソルが特定の要素の上に重なったときに発生するイベントです。
このイベントを利用して、ウェブページの見た目や動作を変化させることができます。
JavaScriptを使ってマウスオーバーを実装する方法を学び、ウェブページにダイナミックな要素を追加しましょう。
●マウスオーバーの基本的な使い方
マウスオーバーは、ウェブ開発において非常にポピュラーな機能です。
特にJavaScriptを活用することで、このインタラクティブな要素を簡単に実装できます。
ユーザーがページの特定の部分にマウスを持っていくと、何らかのアクションが発生することで、ウェブサイトのユーザビリティやエンゲージメントが向上します。
○サンプルコード1：単純なマウスオーバーの実装
下記の例では、JavaScriptを使って基本的なマウスオーバー機能を実装しています。
ユーザーがマウスをHTMLボタンの上に置くと、テキストの色が変化するシンプルなデモです。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード1</title>
<style>
button {
font-size: 24px;
}
</style>
</head>
<body>
<button id="myButton">マウスオーバーしてみてください</button>
<script>
const button = document.getElementById('myButton');
button.addEventListener('mouseover', () => {
button.style.color = 'red';
});
button.addEventListener('mouseout', () => {
button.style.color = '';
});
</script>
</body>
</html>このコードは、マウスオーバーとマウスアウトのイベントをJavaScriptで検知する典型的な方法を示しています。
addEventListenerメソッドを用いて、mouseoverイベントが発生した際にテキストの色を赤に変え、mouseoutイベントで元の色に戻します。
これにより、ユーザーとの対話性が高まり、ページがより魅力的になります。
●マウスオーバーの応用例
マウスオーバーを利用することで、様々な効果を実現できます。
ここでは、いくつかの応用例とサンプルコードを紹介します。
○サンプルコード2：マウスオーバーで画像の切り替え
下記のサンプルコードでは、マウスオーバー時に画像が切り替わる例を表しています。
画像1にマウスオーバーすると、画像2に切り替わります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード2</title>
<style>
img {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<img id="myImage" src="image1.jpg" alt="画像1">
<script>
const image = document.getElementById('myImage');
// マウスオーバー時の処理
image.addEventListener('mouseover', () => {
image.src = 'image2.jpg';
});
// マウスアウト時の処理
image.addEventListener('mouseout', () => {
image.src = 'image1.jpg';
});
</script>
</body>
</html>このサンプルコードでは、マウスオーバーとマウスアウト時に、画像のsrc属性を変更しています。
○サンプルコード3：マウスオーバーでテキストの変更
下記のサンプルコードでは、マウスオーバー時にテキストが変更される例を表しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード3</title>
<style>
p {
font-size: 24px;
}
</style>
</head>
<body>
<p id="myText">マウスオーバーしてください</p>
<script>
const text = document.getElementById('myText');
// マウスオーバー時の処理
text.addEventListener('mouseover', () => {
text.textContent = 'マウスオーバーしました！';
});
// マウスアウト時の処理
text.addEventListener('mouseout', () => {
text.textContent = 'マウスオーバーしてください';
});
</script>
</body>
</html>このサンプルコードでは、マウスオーバーとマウスアウト時に、textContentプロパティを変更しています。
○サンプルコード4：マウスオーバーでCSSの変更
下記のサンプルコードでは、マウスオーバー時にCSSが変更される例を表しています。
ボタンにマウスオーバーすると、背景色とテキストの色が変わります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード4</title>
<style>
button {
font-size: 24px;
background-color: lightblue;
color: black;
}
</style>
</head>
<body>
<button id="myButton">マウスオーバーしてください</button>
<script>
const button = document.getElementById('myButton');
// マウスオーバー時の処理
button.addEventListener('mouseover', () => {
button.style.backgroundColor = 'orange';
button.style.color = 'white';
});
// マウスアウト時の処理
button.addEventListener('mouseout', () => {
button.style.backgroundColor = 'lightblue';
button.style.color = 'black';
});
</script>
</body>
</html>このサンプルコードでは、マウスオーバーとマウスアウト時に、styleプロパティを使ってCSSを変更しています。
○サンプルコード5：マウスオーバーでアニメーション効果
下記のサンプルコードでは、マウスオーバー時にアニメーション効果が発生する例を表しています。
ボックスにマウスオーバーすると、拡大アニメーションが実行されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード5</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: lightblue;
transition: all 0.5s ease;
}
.box:hover {
transform: scale(1.5);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>このサンプルコードでは、CSSの:hover擬似クラスとtransitionプロパティを使ってアニメーションを実現しています。
○サンプルコード6：マウスオーバーでツールチップ表示
下記のサンプルコードでは、マウスオーバー時にツールチップが表示される例を表しています。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード6</title>
<style>
.tooltip {
position: relative;
display: inline-block;
cursor: pointer;
}
.tooltip .tooltiptext {
visibility: hidden;
width: 120px;
background-color: black;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 5px;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
opacity: 0;
transition: opacity 0.3s;
}
.tooltip:hover .tooltiptext {
visibility: visible;
opacity: 1;
}
</style>
</head>
<body>
<span class="tooltip">ワード
<span class="tooltiptext">これはツールチップの説明です</span>
</span>
</body>
</html>このサンプルコードでは、CSSの:hover擬似クラスとvisibility, opacity, transitionプロパティを使ってツールチップを表示しています。
○サンプルコード7：マウスオーバーでドロップダウンメニュー
下記のサンプルコードでは、マウスオーバー時にドロップダウンメニューが表示される例を表しています。
メニューアイテムにマウスオーバーすると、サブメニューが表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード7</title>
<style>
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div class="dropdown">
<span>メニュー</span>
<div class="dropdown-content">
<p>サブメニュー1</p>
<p>サブメニュー2</p>
<p>サブメニュー3</p>
</div>
</div>
</body>
</html>このサンプルコードでは、CSSの:hover擬似クラスを使ってドロップダウンメニューを表示しています。
○サンプルコード8：マウスオーバーでモーダルウィンドウ表示
下記のサンプルコードでは、マウスオーバー時にモーダルウィンドウが表示される例を表しています。
ボタンにマウスオーバーすると、モーダルウィンドウが表示されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード8</title>
<style>
.modal {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.trigger:hover + .modal {
display: block;
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<button class="trigger">モーダルを表示</button>
<div class="modal">
<div class="modal-content">
<span class="close">×</span>
<p>モーダルウィンドウの内容です。</p>
</div>
</div>
<script>
document.querySelector('.close').addEventListener('click', function() {
this.parentElement.parentElement.style.display = 'none';
});
</script>
</body>
</html>このサンプルコードでは、CSSの兄弟セレクタ（+）と:hover擬似クラスを使ってモーダルウィンドウを表示しています。
また、クローズボタンをクリックすることでモーダルウィンドウを非表示にするJavaScriptのコードも追加しています。
○サンプルコード9：マウスオーバーでスライドショー
下記のサンプルコードでは、マウスオーバー時にスライドショーが開始される例を表しています。
スライドエリアにマウスオーバーすると、画像が順番に切り替わります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード9</title>
<style>
/* スライドショーエリアのスタイル設定 */
.slideshow {
width: 300px;
height: 200px;
overflow: hidden;
position: relative;
}
/* 画像のスタイル設定 */
.slideshow img {
position: absolute;
opacity: 0;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 1s;
}
/* アクティブな画像のスタイル設定 */
.slideshow img.active {
opacity: 1;
}
</style>
</head>
<body>
<div class="slideshow">
<img src="img1.jpg" class="active">
<img src="img2.jpg">
<img src="img3.jpg">
</div>
<script>
// 画像の切り替え処理を行う関数
function switchImage(slideshow) {
const images = slideshow.querySelectorAll('img');
const current = Array.from(images).findIndex(img => img.classList.contains('active'));
images[current].classList.remove('active');
const next = (current + 1) % images.length;
images[next].classList.add('active');
}
// マウスオーバー時の処理
const slideshow = document.querySelector('.slideshow');
let timer;
slideshow.addEventListener('mouseover', () => {
timer = setInterval(() => switchImage(slideshow), 2000);
});
// マウスアウト時の処理
slideshow.addEventListener('mouseout', () => {
clearInterval(timer);
});
</script>
</body>
</html>このサンプルコードでは、画像の切り替え処理を行う関数switchImage()を定義しています。
そして、マウスオーバー時にタイマーを設定し、2秒ごとに画像が切り替わるようにしています。
マウスアウト時にはタイマーをクリアし、スライドショーを停止します。
○サンプルコード10：マウスオーバーで音声再生
下記のサンプルコードでは、マウスオーバー時に音声が再生される例を表しています。
音声再生ボタンにマウスオーバーすると、音声が再生されます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サンプルコード10</title>
</head>
<body>
<button class="play-sound">音声を再生</button>
<audio id="my-audio" src="sound.mp3"></audio>
<script>
// 音声再生処理を行う関数
function playSound() {
const audio = document.getElementById('my-audio');
audio.play();
}
// ボタンにマウスオーバー時のイベントリスナーを設定
const playSoundButton = document.querySelector('.play-sound');
playSoundButton.addEventListener('mouseover', playSound);
</script>
</body>
</html>このサンプルコードでは、playSound()という関数を定義し、音声再生の処理を行っています。
ボタンにマウスオーバーすると、playSound()が呼び出され、音声が再生されます。
●注意点と対処法
マウスオーバーを使ったインタラクションは、デスクトップやノートパソコンのようなマウス操作が主なデバイスでは問題ありませんが、タッチ操作が主なスマートフォンやタブレットではマウスオーバーが使えません。
そのため、タッチデバイスに対応するためには、タップやスワイプなどのイベントを利用して同様のインタラクションを実現する必要があります。
まとめ
この記事では、マウスオーバーを使ったさまざまなインタラクションの実装方法を紹介しました。
これらのサンプルコードを参考に、ウェブサイトにマウスオーバーを活用したユーザー体験を追加してみてください。
ただし、デバイスの違いやアクセシビリティを考慮し、適切な方法でインタラクションを実装することが重要です。
