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

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

Barbara Streisand

リリース： 2024-12-23 15:44:13

オリジナル

611 人が閲覧しました

How Can JavaScript Dynamically Alter CSS Properties to Control Element Visibility on Hover?

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";
});

ログイン後にコピー

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

追加考慮事項: