Wie kann ich die Farbe gleichgeordneter Elemente beim Hover mithilfe von CSS ändern?

So ändern Sie die Farbe gleichgeordneter Elemente beim Schweben mit CSS

In HTML ist es üblich, dass Elemente gleichrangig sind, d. h. sie teilen sich das gleiche übergeordnete Element. Wenn Sie mit der Maus über ein bestimmtes Element fahren, möchten Sie möglicherweise das Erscheinungsbild seiner Geschwisterelemente ändern. CSS hat jedoch Einschränkungen, wenn es darum geht, frühere Geschwisterelemente zu formatieren.

Lösung:

CSS ermöglicht es Ihnen, auf Geschwisterelemente abzuzielen, die dem schwebenden Element folgen. Zum Beispiel:

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

Dieser Code legt die Farbe des ersten

fest. Richtung Green und das angrenzende Link zu Rot.

Um die Farbe des Links zu ändern, wenn Sie mit der Maus über das

Fügen Sie in der Überschrift die Pseudoklasse :hover hinzu:

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

Hinweis:

Das Ändern der Farbe früherer Geschwister ist mit CSS nicht möglich. Wenn Sie ein vorheriges Geschwisterelement formatieren möchten, sollten Sie die Verwendung von JavaScript oder einem CSS-Framework in Betracht ziehen, das zusätzliche Funktionen bietet.

Beispiel mit einem Wrapper-Element:

Wrapping der Elemente in a Container (

) mit einer ID ändert die CSS-Regeln nicht. Sie würden immer noch die gleichen Prinzipien wie oben beschrieben befolgen:

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