CSS のみを使用して複数の要素に同期したホバー効果を作成するにはどうすればよいですか?

複数の要素でホバー効果を実現する

Web 開発では、複数の要素がホバー操作に応答する必要があるシナリオに遭遇するのが一般的です。次の HTML 構造を考えてみましょう:

<div class="section">
  <div class="image"><img src="myImage.jpg" /></div>
  <div class="layer">Lorem Ipsum</div>
</div>

「.image」要素と「.layer」要素の両方には、通常状態とホバー状態で異なる色の境界線があります。目標は、「.layer」要素にマウスを置いたときに両方の要素のホバー境界線の色を変更することです。

CSS ソリューション

JavaScript を使用せずにこれを実現するには、CSS利用できます:

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

.section:hover img {
  border: 2px solid #333;
}

.section:hover .layer {
  border: 2px solid #F90;
}

この中でコード:

• 「.section」クラスは背景色を指定します。
• 「.layer」クラスは、「.layer」要素の背景色と境界線の幅を定義します。
• 「.section:hover img」ルールは、「.section」がホバーされたときに画像の境界線の色を変更しますover.
• 「.section:hover .layer」ルールは、同じホバー条件下で「.layer」要素の境界線の色を変更し、両方の要素が「.layer」要素上のホバー操作に確実に応答するようにします。 .

このソリューションは、スクリプトに依存せずに複数の要素に同期したホバー効果を作成するエレガントな方法を提供します。

以上がCSS のみを使用して複数の要素に同期したホバー効果を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。