Heim >Web-Frontend >CSS-Tutorial >Wie manipuliere ich CSS einzelner Klassen mit :hover?

Wie manipuliere ich CSS einzelner Klassen mit :hover?

Barbara Streisand
Barbara StreisandOriginal
2024-11-03 09:06:03461Durchsuche

How to Manipulate CSS of Separate Classes with :hover?

CSS einzelner Klassen mit :hover manipulieren

Beim Arbeiten mit mehreren Klassen in CSS kann es erforderlich sein, den Stil von zu ändern eine Klasse basierend auf dem Schwebezustand eines anderen Elements. Auch wenn es intuitiv erscheinen mag, einen verschachtelten Selektor wie .item:hover .wrapper zu verwenden, ist dies nicht direkt möglich.

Es gibt jedoch zwei praktikable Ansätze, um diesen Effekt zu erzielen:

  • Geschwister- und Kinderbeziehungen: Wenn das Zielelement (Wrapper) ein untergeordnetes oder unmittelbares Geschwisterelement des schwebenden Elements ist (Element) können Sie die Selektoren ~ (Geschwister) oder (unmittelbare Geschwister) verwenden. Zum Beispiel:
.item:hover + .wrapper {
  background-color: red;
}
  • Nachkommenbeziehungen: In Fällen, in denen das Zielelement ein Nachkomme des schwebenden Elements ist, können Sie das > (Nachkommen)-Selektor innerhalb der .item:hover-Regel. Zum Beispiel:
.item:hover > .child > .wrapper {
  color: black;
}

Denken Sie daran, dass diese Ansätze effektiv sind, wenn die Zielelemente Geschwister oder Nachkommen innerhalb der HTML-Struktur sind. Für Elemente, die im DOM nicht direkt verknüpft sind, müssen Sie möglicherweise alternative Lösungen wie JavaScript in Betracht ziehen.

Das obige ist der detaillierte Inhalt vonWie manipuliere ich CSS einzelner Klassen mit :hover?. 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