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

JavaScript

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

・mouseoverイベントとは?
・mouseoverイベントをつける方法
・mouseoverイベントでツールチップを表示する
・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関数が実行されコンソールに文字列が出力されました。
DOMに設定したonmouseoverの動作確認

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イベントで画像を切り替える

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イベントで元の画像に戻しています。

動作確認

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

JavaScriptでmouseoverイベントを設定する方法まとめ

JavaScriptでmouseoverイベントを設定する方法について解説しました。
以下のポイントをまとめます。

・`mouseover`イベントは、ユーザーが要素の上にマウスを乗せたときに発生します。
・HTMLの`onmouseover`属性やJavaScriptの`addEventListener`メソッドを使って、`mouseover`イベントを設定できます。
・`mouseover`イベントを使って、ツールチップを表示したり、画像を切り替えたりすることができることをサンプルを使用して紹介しました。

コメント

タイトルとURLをコピーしました