Wie manipuliere ich CSS einzelner Klassen mit :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!