JavaScriptでmouseoverイベントを設定する方法！

JavaScriptを使って、mouseoverイベントを設定する方法などについて説明します。
実際に動くサンプルを使いつつ、以下について書いています。

・mouseoverイベントとは？
・mouseoverイベントをつける方法
・mouseoverイベントでツールチップを表示する
・mouseoverイベントで画像を切り替える

mouseoverイベントとは？
mouseoverイベントをつける方法
1. DOMにmouseoverを使ってイベントをつける
2. addEventListenerを使ってイベントをつける
  1. HTMLの解説
  2. JavaScriptの解説
mouseoverイベントでツールチップを表示する
mouseoverイベントで画像を切り替える
JavaScriptでmouseoverイベントを設定する方法まとめ

mouseoverイベントとは？

mouseoverイベントは、ユーザーが要素の上にマウスを乗せたときに発生するイベントです。
例えば、画像やリンク、ボタンなどにマウスカーソルを移動させたときに、このイベントを使って特定の処理を行うことができます。

mouseoverイベントをつける方法

mouseoverイベントをHTML要素にonmouseoverでつける方法と、addEventListenerでつける方法です。

DOMにmouseoverを使ってイベントをつける

HTMLのonmouseover属性を使用して、直接イベントを設定する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>onmouseover Example</title>
</head>
<body>
    <button id="myButton" onmouseover="handleMouseOver()">Hover over me</button>
    <script>
        function handleMouseOver() {
            console.log('ボタンにマウスが乗りました');
        }
    </script>
</body>
</html>

HTMLの解説

buttonタグにonmouseover属性を追加しています。
これで、マウスがボタンに乗ったときに、設定した関数が実行されます。

この属性には、マウスが乗ったときに実行するようにhandleMouseOver関数を指定しています。

JavaScriptの解説

handleMouseOver関数は、ボタンにマウスが乗ったときにコンソールにメッセージを出力します。
これにより、マウスオーバーイベントが発生したことを確認できます。

動作確認

実際に動作させてみると、マウスをボタンに乗せたときに、mouseoverでhandleMouseOver関数が実行されコンソールに文字列が出力されました。

addEventListenerを使ってイベントをつける

addEventListenerメソッドを使って、イベントリスナーを設定する方法です。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>addEventListener Example</title>
</head>
<body>
    <button id="myButton">Hover over me</button>
    <script>
        document.getElementById('myButton').addEventListener('mouseover', function() {
            console.log('ボタンにマウスが乗りました');
        });
    </script>
</body>
</html>

HTMLの解説

buttonタグにidを設定し、要素を取得しやすくしています。

JavaScriptの解説

document.getElementById('myButton')でボタン要素を取得し、addEventListenerメソッドでmouseoverイベントを設定しています。
これで、先ほどと同様にマウスオーバーされたときに、コンソールにメッセージを出力します。

実際に確認してみると、onmouseoverを設定した時と同じように動作します。

mouseoverイベントでツールチップを表示する

mouseoverイベントを使って、マウスが要素に乗ったときにツールチップを表示する例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Tooltip Example</title>
    <style>
        #tooltip {
            display: none;
            position: absolute;
            background-color: #333;
            color: #fff;
            padding: 5px;
            border-radius: 5px;
        }
    </style>
</head>
<body>
    <button id="myButton">Hover over me</button>
    <div id="tooltip">ツールチップのテキスト</div>
    <script>
        const button = document.getElementById('myButton');
        const tooltip = document.getElementById('tooltip');

        button.addEventListener('mouseover', function(event) {
            tooltip.style.display = 'block';
            tooltip.style.left = event.pageX + 'px';
            tooltip.style.top = event.pageY + 'px';
        });

        button.addEventListener('mouseout', function() {
            tooltip.style.display = 'none';
        });
    </script>
</body>
</html>

HTMLとCSSの解説

buttonタグにidを設定しています。
そして、tooltip用のdivタグを追加しています。(id="tooltip")
マウスオーバーすると、このdivタグがツールチップとして表示されます。

CSSでは、ツールチップのスタイルを設定し、初期状態では表示しないようにしています。(display: none)

JavaScriptの解説

mouseoverイベントでツールチップを表示し、マウスの位置に応じてツールチップの位置を動的に設定しています。
mouseoutイベントでツールチップを非表示にしています。

動作確認

実際に動作させてみると、ボタンにマウスを乗せるとツールチップが表示され、マウスを外すと非表示になります。

mouseoverイベントで画像を切り替える

mouseoverイベントを使って、マウスが要素に乗ったときに画像を切り替える例を紹介します。

<!DOCTYPE html>
<html lang="ja">
<head>
    <title>Image Swap Example</title>
</head>
<body>
    <img id="myImage" src="image1.png" alt="Image" width="300">
    <script>
        const image = document.getElementById('myImage');

        image.addEventListener('mouseover', function() {
            image.src = 'image2.png';
        });

        image.addEventListener('mouseout', function() {
            image.src = 'image1.png';
        });
    </script>
</body>
</html>

HTMLの解説

imgタグにidを設定し、初期状態の画像(image1.png)を設定しています。

JavaScriptの解説

mouseoverイベントで画像をimage1.pngからimage2.pngに変更し、mouseoutイベントで元の画像に戻しています。

動作確認

実際に動作させてみると、画像にマウスを乗せると画像が切り替わり、マウスを外すと元の画像に戻ります。