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

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

HTMLでは、onmouseover属性を使うことで、マウスポインタが要素の上に移動した瞬間にスクリプト（JavaScript）を実行できます。ボタンのハイライト表示やツールチップの出しなど、インタラクティブな演出を手軽に実装できる便利なイベント属性です。

実装例

次のコードを実行して、onmouseover属性の実際の動作を確認してみましょう。

<!DOCTYPE html>
<html>
   <body>
      <h3 id = "myid" onmouseover = "display()">
         This is demo heading.
      </h3>
      <p>Keep the mouse cursor on the heading to change the color.</p>
      <script>
         function display() {
            document.getElementById("myid").style.color = "red";
         }
      </script>
   </body>
</html>

コードの解説

このサンプルでは、h3要素の見出しにonmouseover属性を設定しています。マウスカーソルを見出しの上に重ねると、display()関数が呼び出され、document.getElementById()で取得した要素の文字色が赤に変更されます。実際にカーソルを見出しの上に置いて、色が変化することを確かめてみてください。

補足：モダンな書き方

近年のJavaScriptでは、HTML側に直接イベントを記述せず、addEventListener("mouseover", ...)を使ってイベントを登録する方法が一般的です。HTMLとスクリプトを分離できるため、可読性や保守性の高いコードを書くことができます。

  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属性を設定しています。見出しの上でマウスボタンを押すと文