Ändern Sie die Hintergrundfarbe des übergeordneten Containers beim Hover untergeordneter Elemente (nur CSS)

Während die Frage nach der Auswahl übergeordneter Elemente mit CSS oft als markiert wird Da es sich um ein Duplikat handelt, wird die Notwendigkeit praktischer Lösungen außer Acht gelassen. Insbesondere das Problem der Änderung der Hintergrundfarbe eines übergeordneten Containers, wenn man mit der Maus über dessen untergeordneten Container fährt, kann durch einen reinen CSS-Ansatz gelöst werden.

Zeigerereignisse und Hover:

Um diesen Effekt zu erzielen, können wir Zeigerereignisse und die :hover-Pseudoklasse manipulieren:

1. Set Zeigerereignisse: keine auf dem übergeordneten Element. Dadurch wird verhindert, dass das übergeordnete Element Hover-Ereignisse empfängt.
2. Definieren Sie die gewünschte Änderung der Hintergrundfarbe des übergeordneten Elements beim Hover.
3. Setze pointer-events: auto auf das untergeordnete Element. Dadurch kann das untergeordnete Element Hover-Ereignisse auslösen, auch wenn das übergeordnete Element dies ignoriert sie.

Beispiel:

div {
  height: 200px;
  width: 200px;
  text-align: center;
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
}

  Anchor Text

Diese Lösung erfasst effektiv das Hover-Ereignis auf dem untergeordneten Element und ermöglicht so, dass sich der Hintergrund des übergeordneten Containers ändert, wenn der Mauszeiger über das untergeordnete Element bewegt wird, und das alles ohne Verwendung von JavaScript.