CSS だけで複数の要素のホバー効果を同時に処理できますか?

CSS を使用した複数の要素のホバー効果

ホバー効果を複数の要素に同時に適用するという課題に直面した場合、従来の常識では JavaScript が推奨されるかもしれません。解決策として。驚くべきことに、CSS だけでこの問題に効果的に対処できます。

画像とレイヤーの 2 つの要素がそれぞれ、通常の状態とホバー状態で異なる色の境界線を持つ HTML 構造を考えてみましょう。いずれかの要素の上にマウスを置くと両方のホバー境界線の色がアクティブになる望ましい動作を作成するには、次の手順に従います:

1. 基本スタイルを定義します:

   • CSS を使用して .section と .layer の背景色を設定します要素。

2. ホバー効果を .section 要素に適用します:

   • カーソルが .section 上に移動すると、更新されます。内の画像の境界線のスタイル

3. ホバー効果を .layer 要素に適用します:

   • 同様に、.layer 上にホバーするときに、変更します。レイヤーの境界線のスタイル

コード例は次のとおりです:

/* Define base styles */
.section {
  background: #ccc;
}
.layer {
  background: #ddd;
}

/* Hover effects on .section */
.section:hover img {
  border: 2px solid #333;
}

/* Hover effects on .layer */
.section:hover .layer {
  border: 2px solid #F90;
}

この CSS により、画像またはレイヤーのいずれかにカーソルを置くと、両方のホバー境界線の色がアクティブになります。要素。必要なのはそれだけで、JavaScript は必要ありません!

以上がCSS だけで複数の要素のホバー効果を同時に処理できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。