Wie kann ich ein übergeordnetes Element beim Hover eines untergeordneten Elements formatieren, ohne CSS-übergeordnete Selektoren zu verwenden?

Styling übergeordneter Elemente beim Hover untergeordneter Elemente ohne CSS-Elternselektoren

Obwohl in CSS kein dedizierter Elternselektor vorhanden ist, ist eine Formatierung möglich ein übergeordnetes Element basierend auf dem Hover-Status eines untergeordneten Elements. Betrachten wir das Beispiel einer „Schaltfläche „Löschen“, die beim Bewegen des Mauszeigers den übergeordneten Abschnitt hervorhebt.

Ein effektiver Ansatz ist die Verwendung eines Pseudo-Wrappers. Indem wir das übergeordnete Element auf „pointer-events: none“ setzen und ein untergeordnetes Div mit „pointer-events: auto“ erstellen, können wir zwischen Mausereignissen unterscheiden, die auf das übergeordnete Element und das untergeordnete Element abzielen.

Das folgende CSS-Snippet zeigt, wie das sein kann erreicht:

div.parent {
  pointer-events: none;
}

div.child {
  pointer-events: auto;
}

div.parent:hover {
  background: yellow;
}

Mit diesem Ansatz können Sie das übergeordnete Element basierend auf dem Hover-Status des untergeordneten Elements formatieren, auch wenn CSS kein dediziertes übergeordnetes Element hat Selektor.

Das obige ist der detaillierte Inhalt vonWie kann ich ein übergeordnetes Element beim Hover eines untergeordneten Elements formatieren, ohne CSS-übergeordnete Selektoren zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!