Wie kann ich mithilfe von CSS die Hintergrundfarbe eines übergeordneten Containers nur ändern, wenn ich mit der Maus über ein untergeordnetes Element fahre?

Ändern Sie beim Schweben des untergeordneten Elements die Hintergrundfarbe des übergeordneten Containers (nur CSS)

Während es im Allgemeinen unmöglich ist, übergeordnete Elemente direkt mit CSS anzusprechen gibt es Workaround-Lösungen für bestimmte Szenarien. Ein solches Szenario ist das Ändern der Hintergrundfarbe eines übergeordneten Containers, wenn Sie mit der Maus über sein untergeordnetes Element fahren.

Lösung: Zeigerereignisse und :hover

Diese Methode nutzt Zeigerereignisse und die :hover-Pseudoklasse:

1. pointer-events: none on parent: Dadurch wird das übergeordnete Element nicht interaktiv und Hover-Ereignisse werden ignoriert.
2. :hover on parent: Definieren Sie die gewünschte Änderung der Hintergrundfarbe auf dem übergeordneten Element, wenn Sie mit der Maus darüber fahren.
3. pointer-events: auto on child: Hover-Ereignisse nur für die untergeordneten Elemente wieder aktivieren, damit diese dies tun können Lösen Sie die Änderung der Hintergrundfarbe auf dem übergeordneten Element aus.

Kompatibilität:

• Funktioniert in IE 11 und Edge, Chrome und Firefox.
• Hinweis: IE 11 und Edge erfordern, dass das untergeordnete Element display: inline-block oder hat Anzeige: Block, damit Zeigerereignisse funktionieren.

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>

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