HTML
 Computer >> コンピューター >  >> プログラミング >> HTML

マウスポインタがHTMLの要素から移動したときにスクリプトを実行する方法

onmouseout属性とは

マウスポインタがある要素の外へ移動したタイミングで処理を実行したい場合は、HTMLのonmouseout属性を使用します。この属性にJavaScriptの関数を指定しておくと、ユーザーがマウスをその要素から離した瞬間に、指定したスクリプトが自動的に呼び出されます。

サンプルコード

以下は、見出し（h3要素）からマウスポインタが離れたときに、文字色を赤に変更するシンプルな実装例です。

<!DOCTYPE html>
<html>
<body>
   <h3 id="myid" onmouseout="mouseOut()">
      This is demo heading.
   </h3>
   <p>上の見出しにマウスを重ねてから、外へ移動してみてください。</p>

   <script>
      function mouseOut() {
         document.getElementById("myid").style.color = "red";
      }
   </script>
</body>
</html>

コードの解説

この例では、h3要素にid="myid"を設定し、onmouseout="mouseOut()"と記述することで、マウスが要素から離れたときに関数mouseOut()が実行されるようにしています。

関数の中では、document.getElementById()を使って対象の要素を取得し、style.colorプロパティを「red」に変更することで、文字色を赤色へ切り替えています。

補足：mouseleaveイベントとの違い

よりモダンなJavaScriptでは、addEventListener()でmouseoutやmouseleaveイベントを登録する方法も一般的です。特にmouseleaveは子要素への移動では発火しないため、意図しない連鎖的な発火（バブリング）を避けたい場合に適しています。用途に応じて使い分けるとよいでしょう。

  1. 【初心者向け】HTML要素にマウスオーバーしたときにテキスト（ツールチップ）を表示する方法

    はじめに この短いチュートリアルでは、画像やリンクなどのHTML要素にユーザーがマウスを合わせた（ホバーした）ときに、簡単な説明文＝いわゆる「ツールチップ」を表示する方法を解説します。 ツールチップの追加は数秒で完了します。使うのは、HTMLのtitle属性だけです。 ホバー時にテキストを表示する基本の方法 以下は、ルービックキューブの画像を使った基本的な例です。画像の上にマウスを移動して1〜2秒待つと、ルービックキューブに関する追加情報がポップアップ表示されます。 上記の画像要素のHTMLマークアップは次のとおりです。 <img src=url-to-image-file

  2. HTMLのonmousedown属性でマウスボタンが押されたときにスクリプトを実行する方法

    HTML要素の上でマウスボタンが押された瞬間にスクリプトを実行したい場合は、onmousedown属性を使用します。この属性は、ユーザーが対象の要素をマウスでクリック（押し下げ）したタイミングで、指定したJavaScript関数を呼び出します。なお、onmousedownはボタンを「押した」瞬間に発火するイベントであり、ボタンを「離した」瞬間に発火するonmouseup属性と組み合わせて使うことで、より直感的なインタラクションを実現できます。サンプルコード以下のコードでは、見出し（h3要素）にonmousedown属性とonmouseup属性を設定しています。見出しの上でマウスボタンを押すと文