Wie kann ich ein übergeordnetes Element beim Hover eines untergeordneten Elements formatieren, ohne übergeordnete Selektoren zu verwenden?

Styling von übergeordneten Elementen beim Schweben unter untergeordneten Elementen ohne übergeordnete Selektoren

Während CSS keinen dedizierten übergeordneten Selektor hat, ist es dennoch möglich, übergeordnete Elemente bei untergeordneten Elementen zu formatieren Elemente werden schwebend angezeigt. In diesem Szenario möchten wir ein Containerelement hervorheben, wenn der Mauszeiger über die darin enthaltene Schaltfläche Löschen bewegt wird.

Bedenken Sie das HTML-Markup:

<div>
    <p>Lorem ipsum ...</p>
    <button>Delete</button>
</div>

Ohne ein übergeordnetes Element Selektor können wir das Konzept der Pseudo-Wrapper nutzen, um den gewünschten Effekt zu erzielen. Durch Setzen von pointer-events: none; auf dem übergeordneten Element und pointer-events: auto; Auf einem untergeordneten Element (einem Pseudo-Wrapper) können wir einen Auslösemechanismus erstellen.

Hier ist der CSS-Code, um dies zu implementieren:

div.parent {  
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}

Hinweis: Stellen Sie sicher, dass untergeordnete Elemente mit ihren eigenen versehen sind Bei Ereignis-Listenern sind Zeigerereignisse auf „Auto“ eingestellt, um die Klickfunktionalität aufrechtzuerhalten.

Das obige ist der detaillierte Inhalt vonWie kann ich ein übergeordnetes Element beim Hover eines untergeordneten Elements formatieren, ohne übergeordnete Selektoren zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!