Wie kann ich die Farbe gleichgeordneter Elemente beim Hover mithilfe von CSS ändern?-CSS-Tutorial-php.cn

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

Mary-Kate Olsen

Freigeben： 2024-12-13 05:49:18

Original

223 Leute haben es durchsucht

How Can I Change the Color of Sibling Elements on Hover Using CSS?

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;
}

Nach dem Login kopieren

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;
}

Nach dem Login kopieren

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 (<div>) mit einer ID ändert die CSS-Regeln nicht. Sie würden immer noch die gleichen Prinzipien wie oben beschrieben befolgen:

<div>

Nach dem Login kopieren

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

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich die Farbe gleichgeordneter Elemente beim Hover mithilfe von CSS ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!