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

要素上にマウスを置くと、CSS の複数の要素に影響を与える

HTML レイアウトでは、要素上にマウスを置くとトリガーされるシナリオが発生する場合があります。複数の関連要素に影響を与えます。次の HTML コードを考えてみましょう:

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

「イメージ」クラスと「レイヤー」クラスの両方に、通常の状態とホバー状態で異なる色の境界線があります。目標は、「layer」要素の上にマウスを移動したときに両方の要素の境界線の色が変化するようにすること、またはその逆を行うことです。

CSS ソリューション:

JavaScript を使用せずにこの効果を実現するCSSを使えば可能です。以下に例を示します:

HTML:

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

CSS:

.section {
    background: #ccc;
}

.layer {
    background: #ddd;
}

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

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

説明:

• ".section:hover img" セレクターは、".section" 要素にカーソルを置いたときに、その中の "img" 要素に色 #333 の 2 ピクセルの実線境界線が必要であることを指定します。
• 同様に、" .section:hover .layer」セレクターは、「.section」内の「.layer」要素をターゲットにし、その境界線の色を #F90 に変更します。 hover.

この CSS により、「layer」要素の上にマウスを移動すると、「image」要素と「layer」要素の両方の境界線の色が更新され、スクリプトを使用せずに目的の効果が作成されます。

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