Wie ändere ich die Hintergrundfarbe eines übergeordneten Elements beim Hover eines untergeordneten Elements mit CSS?

Übergeordnete Elemente können mit CSS nicht direkt angesprochen werden

Problem: So ändern Sie die Hintergrundfarbe des übergeordneten Containers, wenn Sie mit der Maus über das untergeordnete Element fahren Element, das nur CSS verwendet?

Lösung: Verwenden von Zeigerereignissen und :hover

Kompatibilität:

• IE 11 und Edge
• Chrome
• Firefox

Schritte:

1. Zeigerereignisse auf dem übergeordneten Element deaktivieren div: Dies stellt sicher, dass das div :hover ignoriert Ereignisse.

div {
  pointer-events: none;
}

2. Ändern Sie den übergeordneten Hintergrund beim Bewegen des Mauszeigers: Legen Sie fest, dass sich die Hintergrundfarbe ändert, wenn der Mauszeiger über das übergeordnete Element bewegt wird.

div:hover {
  background: #F00;
}

3. Zeigerereignisse für das Kind aktivieren: Dadurch kann das Hover-Ereignis nur dann ausgelöst werden, wenn das untergeordnete Element wird mit der Maus bewegt.

div > a {
  pointer-events: auto;
}

Erklärung:

Wenn das untergeordnete Element mit der Maus bewegt wird, wird aufgrund der Zeigerereignisse auch das übergeordnete Div mit der Maus bewegt Eigentum. Allerdings wird die Hover-Pseudoklasse des übergeordneten Elements aufgrund der Einstellung pointer-events: none ignoriert. Durch die Aktivierung von Zeigerereignissen auf dem untergeordneten Element wird das Hover-Ereignis ausschließlich auf dem untergeordneten Element ausgelöst, wodurch sich die Hintergrundfarbe des übergeordneten Elements wie gewünscht ändert.

Hinweis: In IE 11 und Edge das untergeordnete Element muss display: inline-block oder display: block haben, damit Zeigerereignisse ordnungsgemäß funktionieren.

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