Wie kann ich die Farbe eines gleichgeordneten Elements beim Hover mithilfe von CSS ändern?

Farben gleichgeordneter Elemente beim Hover mit CSS manipulieren

Eine Möglichkeit, das Erscheinungsbild von HTML-Elementen zu ändern, ist CSS. In diesem Artikel gehen wir einer spezifischen Anfrage nach: Ändern der Farbe von Geschwisterelementen, wenn Sie mit der Maus darüber fahren.

Ursprüngliche Problemstellung

Angesichts des folgenden HTML-Codes:

<h1>Heading</h1>
<a class="button" href="#">-</a>

Unser Ziel ist es, die Farbe des

Element, wenn wir mit der Maus über das -Element fahren. Element nur mit CSS.

Interaktion von Geschwisterelementen

Leider können CSS-Geschwisterselektoren keine Auswirkungen auf Elemente haben, die ihnen vorangehen. Im obigen Beispiel ist

Das Element steht vor dem Element, was es unmöglich macht, seine Farbe direkt mit dem (unmittelbar folgenden Geschwister-)Selektor zu ändern.

Containerbasierte Lösung

Eine Problemumgehung besteht darin, ein übergeordnetes Container-Div einzuführen mit einer ID:

<div>

Dies stellt jedoch keine direkte Verbindung zwischen dem Element und das

Element.

Alternativer Ansatz

Um diese Einschränkung zu überwinden, sollten Sie CSS verwenden, um auf „nächste Geschwister“ (Elemente, die nach einem bestimmten Element kommen) abzuzielen. Das folgende Beispiel zeigt, wie dies erreicht wird:

h1 {
  color: #4fa04f;
}

h1 + a {
  color: #a04f4f;
}

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

Dadurch wird die Farbe des aktualisiert. Element zu #a04f4f in seinem Standardzustand und zu #4f4fd0, wenn wir mit der Maus über das

-Element fahren. Element.

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