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

CSS の複数の要素にホバー効果を適用する

特定の要素の上にマウスを置くときに、関連する複数の要素に効果を適用することができます。たとえば、「image」と「layer」という 2 つの隣接する要素があり、それぞれに別々の境界線が付いているとします。 1 つの要素の上にマウスを移動すると、両方の要素の境界線の色が影響を受けるようにするにはどうすればよいですか?

JavaScript を使用しないソリューション

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

.section {
  background: #ccc;
}

.layer {
  background: #ddd;
}

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

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

この例では、「.section」要素の上にマウスを置くと、その中の「img」には、色 #333 の 2 ピクセルの実線の境界線が表示されます。同時に、「.section」内の「.layer」要素も、色 #F90 の 2 ピクセルの実線境界線を受け取ります。 「.layer」要素の上にマウスを移動すると、同じ動作が発生します。

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