Heim >Web-Frontend >CSS-Tutorial >Wie ändere ich die Farbe von Geschwisterelementen beim Schweben mit CSS?

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

DDD
DDDOriginal
2024-12-10 08:07:16327Durchsuche

How to Change the Color of Sibling Elements on Hover with 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!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn