HTMLのonmouseoutイベント属性とは?使い方をサンプルコードで解説

onmouseoutイベント属性とは

HTMLのonmouseoutイベント属性は、HTMLドキュメント内でマウスポインタがHTML要素の領域から外れた瞬間に発生するイベントです。マウスが要素の上から離れたタイミングでJavaScriptを実行したい場合に使用され、ボタンの色を元に戻す、ツールチップを非表示にするといったインタラクティブな演出に活用できます。

構文

onmouseoutイベント属性の基本構文は以下のとおりです。

<tagname onmouseout="script"></tagname>

使用例

ここでは、onmouseoutイベント属性の具体的な使用例を紹介します。以下のサンプルでは、赤い円の上にマウスカーソルを乗せると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 onmouseoutイベント属性 デモ</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イベントが発生し、背景色が緑色に変化します。このように、onmouseoutイベント属性を使えば、マウスが要素から離れたタイミングを簡単に検出できます。

onmouseoutとonmouseleaveの違い

onmouseoutとよく似たイベントにonmouseleaveがあります。両者の主な違いは以下のとおりです。

• onmouseout: マウスが要素から外れたときに発生し、さらに子要素へマウスが移動した場合にも発生します(イベントバブリングの影響を受けます)。
• onmouseleave: マウスが要素とその子要素から完全に外れたときにのみ発生します。

子要素を含む要素(リストやカードなど)でマウスの出入りを検出したい場合は、意図しないイベントの連続発生を防ぐためにonmouseleaveの使用を検討するとよいでしょう。