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

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

Die Frage ist, wie die Hintergrundfarbe des übergeordneten Elements geändert werden kann, wenn der Mauszeiger über das untergeordnete Element bewegt wird ist üblich. Typischerweise wird diese Art von Frage als Duplikat der Anfrage betrachtet, ob CSS übergeordnete Selektoren unterstützt.

Obwohl es stimmt, dass CSS keine direkten übergeordneten Selektoren bietet, gibt es CSS-Lösungen, die dieses spezielle Problem lösen können.

Verwenden von Zeigerereignissen und :hover

Diese Technik umfasst drei Schritte:

1. Wenden Sie die Eigenschaft pointer-events: none auf das übergeordnete Element an. Dadurch ignoriert das übergeordnete Element Hover-Ereignisse.
2. Definieren Sie die Änderung der Hintergrundfarbe für das übergeordnete Element beim Hover: parent:hover { background: #F00; }
3. Setze pointer-events: auto auf das untergeordnete Element. Dadurch wird sichergestellt, dass nur das untergeordnete Element Hover-Ereignisse auslöst und sich somit indirekt auf das übergeordnete Element auswirkt.

Wie es funktioniert:

• Wenn das untergeordnete Element mit der Maus bewegt wird, Das übergeordnete Element befindet sich ebenfalls im Schwebezustand, da das Ereignis sprudelt.
• Die pointer-events:none-Eigenschaft des übergeordneten Elements verhindert dies jedoch davon ab, auf seine eigene Hover-Pseudoklasse zu reagieren.
• Da das untergeordnete Element pointer-events: auto hat, aktiviert es effektiv das Event-Bubbling und löst den Hover des übergeordneten Elements aus.

Beispiel :

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

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

Diese Lösung ist mit Browsern einschließlich IE kompatibel 11, Edge, Chrome und Firefox. Für IE 11 und Edge muss das untergeordnete Element display: inline-block oder display: block haben, um Zeigerereignisse zu aktivieren.

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