ボタンをクリックして、HTML要素のホバー色を動的に変更する方法は？

CSS変数とJavaScriptを使用して、要素ホバーカラーを動的に変更する

この記事では、Webインタラクティブエクスペリエンスを改善するためにボタンをクリックして、HTML要素のホバー色を動的に変更する方法を紹介します。 CSS変数とJavaScriptを使用して、この機能を実装します。

目標は次のとおりです。ボタンをクリックして、既存の要素ホバースタイルを変更します。これを行うには、CSS変数を使用してホバー色を定義し、JavaScriptを介してボタンクリックイベントのCSS変数の値を変更します。

実装計画：

まず、HTML構造には、ターゲット要素（ .element ）と複数のボタン（ .change-color ）が含まれ、各ボタンはホバー色に対応します。

<div class="container">
  <div class="element"></div>
  <button class="change-color">赤</button>
  <button class="change-color">緑</button>
  <button class="change-color">青</button>
</div>

CSSスタイルは、要素の基本スタイルを定義し、CSS --colorを使用して、ホバー色を制御するために、デフォルトの赤を制御します。

 。要素 {
  幅：100px;
  高さ：100px; /*アスペクト比はすべてのブラウザと互換性がなく、固定高に変更します*/
  マージン：20px;
  背景色：Lightgray; /*背景色を追加して、効果を容易にしやすくします*/
}

.Element：Hover {
  背景：var（ - 色、赤）;
}

最後に、JavaScriptコードは、各ボタンクリックイベントの聴取を聴きます。ボタンをクリックした後、ボタンのテキストコンテンツ（色名）を取得し、css変数に色値を割り当てます--color el.style.setProperty()メソッドを使用して - color：

 const el = document.queryselector（ "。要素"）;

document.QuerySeLectorall（ "。Change-color"）。foreach（e => {
  E.AddeventListener（ "click"、（）=> {
    el.style.setProperty（ " -  color"、e.TextContent）;
  }）;
}）;

HTML、CSS、およびJavaScriptの共同作業を通じて、ボタンをクリックしてHTML要素のホバー色を動的に変更する機能を実現できます。この方法は、シンプルで効率的で、メンテナンスが簡単です。

以上がボタンをクリックして、HTML要素のホバー色を動的に変更する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。