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

CSS を使用してホバー時に兄弟要素の色を変更する方法

HTML では、要素が兄弟である、つまり要素が共有していることがよくあります。同じ親要素。特定の要素の上にマウスを移動すると、その兄弟要素の外観を変更することができます。ただし、前の兄弟のスタイルを設定する場合、CSS には制限があります。

解決策:

CSS を使用すると、ホバーされた要素に続く兄弟要素をターゲットにすることができます。例:

h1 {
    color: #4fa04f;
}
h1 + a {
    color: #a04f4f;
}

このコードは、最初の

の色を設定します。緑とその隣の に向かってください。リンクを赤にします。

の上にマウスを移動したときにリンクの色を変更するには、見出しに、:hover 疑似クラス:

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

注:

CSS では前の兄弟の色を変更することはできません。以前の兄弟のスタイルを設定する場合は、追加機能を提供する JavaScript または CSS フレームワークの使用を検討してください。

ラッパー要素を使用した例:

要素をラップするID を持つコンテナー (

) は CSS ルールを変更しません。上記と同じ原則に従います:

<div><pre class="brush:php;toolbar:false">#banner h1 {
    color: #4fa04f;
}
#banner h1 + a {
    color: #a04f4f;
}
#banner h1:hover + a {
    color: #4f4fd0;
}