HTMLのonmouseoverイベント属性とは？構文と使い方をサンプルコードで解説

HTMLのonmouseoverイベント属性は、HTMLドキュメント内の要素の上にマウスポインタが乗った瞬間に発生するイベント属性です。ボタンの色を変えたり、ツールチップを表示したりするなど、インタラクティブなWebページを作成する際に広く活用されています。

構文

onmouseoverイベント属性の基本的な構文は以下の通りです。

<tagname onmouseover="script"></tagname>

それでは、HTMLのonmouseoverイベント属性の具体的な使用例を見ていきましょう。

使用例

以下のサンプルコードでは、赤い円の上にマウスカーソルを移動するとonmousemoveイベントが発生して円の色が変化し、マウスカーソルが円から離れるとonmouseoutイベントが発生します。

<!DOCTYPE html>
<html>
<head>
<style>
    body {
        color: #000;
        height: 100vh;
        background-color: #FBAB7E;
        background-image: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%);
        text-align: center;
    }
    .circle {
        background: #db133a;
        height: 150px;
        width: 150px;
        border-radius: 50%;
        margin: 10px auto;
    }
    p {
        margin: 30px auto;
    }
</style>
</head>
<body>
<h1>HTML onmouseoverイベント属性のデモ</h1>
<div class="circle" onmousemove="mouseMoveFn()" onmouseout="mouseOutFn()"></div>
<p>赤い円の上にカーソルを移動してみてください</p>
<script>
    function mouseMoveFn() {
        document.querySelector('.circle').style.background = '#2274A5';
    }
    function mouseOutFn() {
        document.querySelector('.circle').style.background = '#0B6E4F';
    }
</script>
</body>
</html>

実行結果

ブラウザで上記のコードを実行すると、次のように表示されます。

次に、赤い円の上にマウスカーソルを移動してみましょう。onmousemoveイベント属性が動作し、円の色が青色に変化します。

さらに、マウスカーソルを円の外側へ移動すると、onmouseoutイベント属性が動作し、円の色が緑色に変わります。このように、onmouseover系のイベント属性を組み合わせることで、マウスの動きに応じた動的な表現を簡単に実装できます。