Kann ich ein übergeordnetes Element beim Hover eines untergeordneten Elements in CSS formatieren?

Styling übergeordneter Elemente beim Hover untergeordneter Elemente

Frage: Ist es möglich, das Erscheinungsbild eines übergeordneten Elements zu ändern? wenn Sie mit der Maus über ein untergeordnetes Element fahren, auch ohne einen dedizierten übergeordneten Selektor CSS?

Kontext: Stellen Sie sich ein Szenario mit einer Schaltfläche „Löschen“ vor. Wenn der Benutzer den Cursor über die Schaltfläche bewegt, möchten wir den übergeordneten Abschnitt hervorheben, in dem er enthalten ist.

Antwort:

Es gibt zwar keinen echten übergeordneten Selektor In CSS gibt es Methoden, um den gewünschten Effekt mithilfe von Cascading Layers (Z-Index) oder zu erzielen Pseudo-Wrapper.

Pseudo-Wrapper-Methode:

Bei dieser Methode wird ein Pseudo-Wrapper-Element erstellt, das als unsichtbare Ebene über dem übergeordneten Element fungiert. Wenn die Maus über das untergeordnete Element fährt, interagiert es mit dem Pseudo-Wrapper, der wiederum CSS-Änderungen am übergeordneten Element auslöst.

Code:

div.parent {
  z-index: 0;
}

div.child {
  z-index: 1;
  pointer-events: auto;
}

div.child:hover + div.parent {
  background-color: yellow;
}

Erklärung:

• Wir weisen dem übergeordneten Element einen niedrigen Z-Index zu und stellen sicher, dass er unten liegt das Kind.
• Das Kind hat einen höheren Z-Index und Zeigerereignisse sind auf „Auto“ eingestellt, sodass Mausereignisse passieren können.
• Wenn der Mauszeiger über das Kind bewegt wird, wird der benachbarte Geschwisterselektor ( ) angezeigt. zielt auf das übergeordnete Element ab und wendet eine gelbe Hintergrundfarbe an.

Das obige ist der detaillierte Inhalt vonKann ich ein übergeordnetes Element beim Hover eines untergeordneten Elements in CSS formatieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!