Wie kann ich mithilfe von CSS die Hintergrundfarbe eines übergeordneten Containers beim Hover eines untergeordneten Containers ändern?

Ändern der Hintergrundfarbe des übergeordneten Containers beim Schweben des untergeordneten Elements mit CSS

Viele mögen zunächst vermuten, dass CSS keine Möglichkeit hat, übergeordnete Elemente gezielt anzusprechen, aber das Problem ist Das Problem, die Hintergrundfarbe eines übergeordneten Containers beim Bewegen des untergeordneten Containers zu ändern, kann mit einer cleveren Lösung gelöst werden.

CSS-Lösung mit pointer-events und :hover

Um den gewünschten Effekt zu erzielen, erstellen Sie drei CSS-Regeln:

1. Setzen Sie pointer-events: none auf das übergeordnete Div, damit es nicht mehr darauf reagiert Hover-Ereignisse.
2. Definieren Sie die Änderung der Hintergrundfarbe für das übergeordnete Element im parent-div:hover Selektor.
3. Setzen Sie pointer-events: auto für das untergeordnete Element, um die Auslösung des Hover-Ereignisses zu ermöglichen, wenn das Kind mit der Maus darüber bewegt wird.

Dieser Ansatz funktioniert, weil das übergeordnete Hover-Ereignis aktiviert wird, wenn es aktiviert ist Das untergeordnete Element wird mit der Maus bewegt, während das übergeordnete Element seine Hover-Pseudoklasse ignoriert, sodass das Hover-Ereignis nur auf der ausgelöst werden kann Kind.

Beispiel

div {
  pointer-events: none;
}
div:hover {
  background: #F00;
}
div > a {
  pointer-events: auto;
}

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

Kompatibilität

Diese Lösung ist kompatibel mit IE 11 und Edge, Chrome und Firefox. In IE 11 und Edge muss das untergeordnete Element jedoch display: inline-block oder display: block haben, damit Zeigerereignisse ordnungsgemäß funktionieren.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS die Hintergrundfarbe eines übergeordneten Containers beim Hover eines untergeordneten Containers ändern?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!