JavaScript で CSS プロパティを動的に変更して、ネストされた要素にホバー効果を作成するにはどうすればよいですか?-CSSチュートリアル-php.cn

JavaScript で CSS プロパティを動的に変更して、ネストされた要素にホバー効果を作成するにはどうすればよいですか?

Barbara Streisand

リリース： 2024-12-18 13:01:11

オリジナル

700 人が閲覧しました

How Can JavaScript Dynamically Alter CSS Properties to Create Hover Effects on Nested Elements?

JavaScript を使用した CSS プロパティの動的変更を理解する

最新の Web 開発の出現により、要素の視覚的なプレゼンテーションを変更することが必要になることがよくあります。ユーザーのインタラクションや特定の条件に動的に応答します。 JavaScript は、CSS プロパティをプログラムで操作することでこれを実現する強力なソリューションを提供します。

目的: ネストされた要素にホバー効果を実装する

提供されたシナリオでは、隠し

別の

要素が存在する場合ホバリングされます。これを達成するために、CSS プロパティを変更するための JavaScript の実際的な応用を詳しく掘り下げていきます。

ステップ 1: スタイルプロパティを理解する

次を使用して CSS プロパティを変更するための鍵JavaScript は style プロパティにあります。要素のインラインスタイルに直接アクセスできるため、境界線、色、表示設定などのさまざまな属性を操作できます。

ステップ 2: 境界線スタイルの操作

要素をホバーしたときに要素の境界線を変更するには、次のコマンドを使用できます。構文:

document.getElementById("elementId").style.border = "3px solid #FF0000";

ログイン後にコピー

このコードは、指定された ID を持つ要素の境界線を 3 ピクセル幅の実線の赤い境界線に設定します。

ステップ 3: 表示設定の変更

あなたの場合、非表示の

を作成したいとします。ホバーイベントが発生すると表示されます。これを実現するには、表示プロパティを使用します。

document.getElementById("hiddenElementId").style.display = "block";

ログイン後にコピー

このコードは、非表示要素の表示プロパティを「ブロック」に設定し、非表示要素を表示します。

ステップ 4 : すべてを組み合わせる

ネストされた要素にホバー効果を実装するには、次のコマンドを使用できます。 script:

var left1 = document.querySelector(".left1");
var right1 = document.querySelector(".right1");

var leftElement = document.querySelector(".left");
leftElement.addEventListener("mouseover", function() {
  left1.style.display = "block";
});

leftElement.addEventListener("mouseout", function() {
  left1.style.display = "none";
});

var rightElement = document.querySelector(".right");
rightElement.addEventListener("mouseover", function() {
  right1.style.display = "block";
});

rightElement.addEventListener("mouseout", function() {
  right1.style.display = "none";
});

ログイン後にコピー

このスクリプトは、非表示要素の表示プロパティを効果的に変更して、対応する表示要素にマウスを置いたときに表示されるようにします。

以上がJavaScript で CSS プロパティを動的に変更して、ネストされた要素にホバー効果を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。