検索

ホームページ >ウェブフロントエンド >フロントエンドQ&A >JavaScriptのホバー機能をHTMLに実装する方法

JavaScriptのホバー機能をHTMLに実装する方法

PHPz
PHPzオリジナル
2023-04-25 10:46:411789ブラウズ

JavaScript のホバー機能とは、マウス ポインターを要素の上に置くと、プロンプト情報の表示や要素スタイルの変更など、指定された操作を実行できることを意味します。この機能は Web デザインでは非常に一般的であり、ユーザーにより優れたインタラクティブなエクスペリエンスを提供できます。 HTML に JavaScript ホバー機能を実装するには、以下の手順に従います。

ステップ 1: HTML コードを作成する

まず、ホバー機能を実装する必要がある要素を含む、基本的な HTML コードを作成する必要があります。たとえば、以下に示すような単純な div 要素を作成できます。 

<div id="myDiv">这是一个 div 元素</div>

ステップ 2: JavaScript コードを追加する

次に、ホバー関数を実装するための JavaScript コードを追加する必要があります。 JavaScript コードを HTML ファイルの head 要素に配置することも、外部の .js ファイルに配置して参照することもできます。たとえば、次は単純な JavaScript コードです。 

const myDiv = document.getElementById("myDiv");
myDiv.addEventListener("mouseover", function() {
  myDiv.style.backgroundColor = "red";
});

myDiv.addEventListener("mouseout", function() {
  myDiv.style.backgroundColor = "white";
});

このコードは、まず document.getElementById("myDiv") メソッドを通じて ID「myDiv」の要素を取得します。次に、addEventListener() メソッドを使用して、要素に 2 つのイベント リスナーを追加します。最初のリスナーは mouseover で、マウス ポインターが要素の上に置かれたときにトリガーされるイベントを表します。イベントがトリガーされると、style.backgroundColor メソッドを通じて要素の背景色を赤に設定できます。 2 番目のリスナーは mouseout で、マウス ポインターが要素から離れたときにトリガーされるイベントを表します。イベントが発生すると、背景色を白にリセットできます。

このコードの効果は、マウス ポインターが div 要素の上にあると背景色が赤に変わり、マウス ポインターが離れると背景色が白に戻ります。

ステップ 3: JavaScript コードを呼び出す

最後に、ホバー機能を有効にするために JavaScript コードを HTML ページに接続する必要があります。 JavaScript コードは次の方法で呼び出すことができます:

  • JavaScript コードを HTML ページの