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

So ändern Sie die Farbe von Geschwisterelementen beim Hover in CSS

In HTML sind Geschwisterelemente, die dasselbe übergeordnete Element haben. Wenn Sie mit der Maus über bestimmte Elemente fahren, ist es oft wünschenswert, das Erscheinungsbild ihrer Geschwisterelemente zu ändern.

Ändern der Farbe eines folgenden Geschwisterelements

Um die Farbe eines zu ändern Für ein Geschwisterelement, das dem schwebenden Element folgt, verwenden Sie den benachbarten Geschwisterselektor ( ) in CSS. Um beispielsweise die Farbe eines folgenden Element, wenn das vorhergehende

Element wird mit der Maus bewegt:

h1 {
  color: #4fa04f;
}

h1 + a {
  color: #a04f4f;
}

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

Einschränkung: Ändern der Farbe eines vorhergehenden Geschwisterelements

CSS bietet keine direkte Möglichkeit, den Stil eines vorhergehenden Geschwisterelements zu ändern Element basierend auf dem Schwebezustand seines Geschwisterelements.

Verwendung eines Wrappers Div

Durch das Umschließen der Elemente in einem Div mit einer ID können Sie die Farbe des vorhergehenden Geschwisterelements mithilfe komplexerer CSS-Selektoren ändern.

<div>

#banner h1 {
  color: #4fa04f;
}

#banner a {
  color: #a04f4f;
}

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

#banner:hover a {
  color: #a04f4f;
}

Dieser Ansatz ermöglicht für eine bessere Kontrolle über die Gestaltung von Geschwisterelementen, führt jedoch zu zusätzlichem Markup und kann weniger effizient sein.

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