Wie kann ich die Hintergrundfarbe eines übergeordneten Containers nur mithilfe von CSS ändern, wenn ich den Mauszeiger über ein untergeordnetes Element bewege?

Hintergrundfarbe des übergeordneten Containers beim Hover des untergeordneten Containers ändern (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:

1. Set manipulieren Zeigerereignisse: keine auf dem übergeordneten Element. Dies 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;
}

<div>
  <a href="#">Anchor Text</a>
</div>

Diese Lösung erfasst effektiv das Hover-Ereignis auf dem untergeordneten Element, sodass sich der Hintergrund des übergeordneten Containers ändern kann wenn das Kind bewegt wird, alles ohne Verwendung von JavaScript.

Das obige ist der detaillierte Inhalt vonWie kann ich die Hintergrundfarbe eines übergeordneten Containers nur mithilfe von CSS ändern, wenn ich den Mauszeiger über ein untergeordnetes Element bewege?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!