JavaScript で CSS プロパティを動的に変更して、ホバー時の要素の表示を制御するにはどうすればよいでしょうか?

JavaScript を使用した CSS プロパティの変更

JavaScript を使用して CSS プロパティを動的に調整してユーザー インターフェイスを強化することは、Web 開発における一般的な要件です。これを説明するために、

の上にカーソルを置く特定のシナリオを調べてみましょう。要素は、別の

の可視性をトリガーする必要があります。

実装:

この効果を実現するには、ターゲット要素の style プロパティを操作できます。次のマークアップを考えてみましょう:

<div class="left">Hello1</div>
<div class="center">
  <div class="left1">Bye1</div>
  <div class="right1">Bye2</div>
</div>
<div class="right">Hello2</div>

デフォルトでは、left1 要素と right1 要素は、display: none を使用して非表示になります。ホバー時にそれらを表示するには、JavaScript イベント リスナーを左右のコンテナにアタッチします。

// Handle hover event for the left container
document.querySelector(".left").addEventListener("mouseover", function() {
  document.querySelector(".left1").style.display = "block";
});

// Handle hover event for the right container
document.querySelector(".right").addEventListener("mouseover", function() {
  document.querySelector(".right1").style.display = "block";
});

このスクリプトは、対応するホバー イベントが発生したときに、非表示の要素の表示プロパティを「ブロック」に設定します。

追加考慮事項:

• ブラウザ間の互換性のために、ベンダー プレフィックス (例: -webkit-border、-moz-border) を処理する必要がある場合があります。
• クラスを使用すると、要素のスタイルを設定し、その状態を管理するためのより効率的な方法になります。
• パフォーマンスの最適化を検討してください。スタイルを設定するときに必要な要素のみを対象にするなど。

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

JavaScript css webkit for using Interface Property Event default this display border

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。