Wie ändere ich die Farbe von Geschwisterelementen beim Schweben mit CSS?

So ändern Sie selektiv die Farbe von Geschwistern mit CSS-Hover

Wenn Sie mit der Maus über ein Element fahren, können bestimmte CSS-Techniken eingesetzt werden Ändern Sie das Erscheinungsbild der benachbarten Elemente.

Targeting Nachfolgend Geschwister

Durch die Verwendung eines „ “-Zeichens in Ihrem CSS-Selektor können Sie das Element gezielt ansprechen, das unmittelbar auf das Element folgt, über das Sie den Mauszeiger bewegen. Beispielsweise ändert der folgende Code die Farbe eines „a“-Elements, wenn der Mauszeiger über das vorhergehende „h1“-Element bewegt wird:

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

Targeting auf frühere Geschwister

Allerdings , CSS hat Einschränkungen, wenn es darum geht, frühere Geschwister anzusprechen. Um einen ähnlichen Effekt zu erzielen, müssten Sie die Elemente in einen übergeordneten Container einschließen und den allgemeinen Geschwisterselektor „~“ verwenden, um das gewünschte Element anzusprechen. Diese Methode führt jedoch möglicherweise nicht immer zum gewünschten Ergebnis.

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

Beispielszenario

Bedenken Sie das folgende HTML-Markup:

<h1>

Um die Farbe des Elements „a“ zu ändern, wenn der Mauszeiger über „h1“ mit der ID „title“ bewegt wird, können Sie Folgendes verwenden CSS:

#title:hover + .button { color: #4f4fd0; }

Das obige ist der detaillierte Inhalt vonWie ändere ich die Farbe von Geschwisterelementen beim Schweben mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!