Kann CSS den Stil eines gleichgeordneten Elements basierend auf dem Hover-Status eines anderen Elements beeinflussen?

Geschwisterinteraktion mit CSS-Hover

Im Webdesign können Sie auf Szenarien stoßen, in denen Sie das Erscheinungsbild der Geschwister eines Elements basierend darauf ändern möchten sein Schwebezustand. Es gibt jedoch eine Einschränkung dieser Funktionalität in CSS.

Ändern der Farbe von Geschwistern beim Hover

Wenn Sie angrenzende Elemente haben und die Farbe eines folgenden Geschwisters ändern möchten Wenn das erste Element (normalerweise vor dem Geschwisterelement positioniert) mit der Maus bewegt wird, ist dies mithilfe von CSS möglich. Sie können beispielsweise die Farbe eines „a“-Links ändern, wenn Sie mit der Maus über eine „h1“-Überschrift darüber fahren.

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

Einschränkungen

Sie kann die Farbe eines vorherigen Geschwisters nicht auf die gleiche Weise beeinflussen. Wenn Sie eine „h1“-Überschrift gefolgt von einem „a“-Link haben und die Farbe der Überschrift ändern möchten, wenn Sie mit der Maus über den Link fahren, ist das mit CSS nicht möglich.

a:hover + h1 {
  background-color: #444;  // This won't work
}

CSS-Geschwisterinteraktion Beispiel

Hier ist ein Beispiel, das die möglichen und unmöglichen CSS-Interaktionen dabei veranschaulicht Kontext:

<h1>Heading</h1>
<a class="button" href="#">The "Button"</a>
<h1>Another Heading</h1>

h1 {
  color: #4fa04f;
}
h1:hover + a {
  color: #4f4fd0;
}
a:hover + h1 {
  background-color: #444;  // This won't work
}

Das obige ist der detaillierte Inhalt vonKann CSS den Stil eines gleichgeordneten Elements basierend auf dem Hover-Status eines anderen Elements beeinflussen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!