CSS を使用してホバー時に兄弟 HTML 要素の色を変更するにはどうすればよいですか?

CSS でホバー時に兄弟要素の色を変更する方法

HTML では、兄弟とは同じ親要素を共有する要素です。特定の要素の上にマウスを移動すると、その兄弟要素の外観を変更することが望ましいことがよくあります。

後続の兄弟要素の色の変更

要素の色を変更するにはホバーされた要素の後に続く兄弟要素には、CSS の隣接する兄弟セレクター ( ) を使用します。たとえば、次のの色を変更するには、直前の

要素が要素がホバーされています:

h1 {
  color: #4fa04f;
}

h1 + a {
  color: #a04f4f;
}

h1:hover + a {
  color: #4f4fd0;
}

制限事項: 先行する兄弟要素の色の変更

CSS には、先行する兄弟要素のスタイルを変更する直接的な方法はありません。兄弟のホバー状態に基づく要素。

使用ラッパー Div

ID を使用して div 内の要素をラップすると、より複雑な CSS セレクターを使用して前の兄弟の色を変更できます。

<div>

#banner h1 {
  color: #4fa04f;
}

#banner a {
  color: #a04f4f;
}

#banner h1:hover a {
  color: #4f4fd0;
}

#banner:hover a {
  color: #a04f4f;
}

これこのアプローチにより、兄弟要素のスタイルをより細かく制御できますが、追加のマークアップが導入されるため、効率が低下する可能性があります。

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