Wie kann ich ein übergeordnetes Element formatieren, wenn dessen untergeordnetes Element schwebend ist?

Styling übergeordneter Elemente mit untergeordneten Element-Hovern

Es ist eine häufige Anforderung, Stile auf ein übergeordnetes Element anzuwenden, wenn eine bestimmte Aktion, z. B schwebend, tritt bei einem untergeordneten Element auf. CSS bietet jedoch keinen nativen übergeordneten Selektor. Dennoch gibt es kreative Möglichkeiten, diese Funktionalität ohne einen solchen Selektor zu erreichen.

Verwendung von Pseudoelementen

Ein Ansatz besteht darin, Pseudoelemente zu verwenden, um einen Wrapper um das übergeordnete Element zu erstellen Element. Für dieses Wrapper-Pseudoelement kann die Eigenschaft „pointer-event“ auf „auto“ gesetzt werden, sodass Mausereignisse durch das Element geleitet werden können. Für das übergeordnete Element hingegen kann die Eigenschaft pointer-event auf none gesetzt sein. Dadurch wird sichergestellt, dass beim Bewegen des Mauszeigers über das untergeordnete Element das Mausereignis auf dem Wrapper-Pseudoelement und nicht auf dem übergeordneten Element ausgelöst wird. Indem Sie Hover-Stile auf das Wrapper-Pseudoelement anwenden, können Sie diese effektiv auf das übergeordnete Element anwenden, wenn der Mauszeiger über das untergeordnete Element bewegt wird.

Beispielcode:

div.parent {
    pointer-events: none;
}

div.child {
    pointer-events: auto;
}

div.parent:hover {
    background: yellow;
}

<div class="parent">
    parent - you can hover over here and it won't trigger
    <div class="child">hover over the child instead!</div>
</div>

Zusätzliche Hinweise:

• Die pointer-events-Eigenschaft wird nicht von allen Browsern unterstützt, daher ist es aus Kompatibilitätsgründen unbedingt erforderlich, Browser-Präfixe (z. B. -webkit-pointer-events) zu verwenden.
• Diese Technik kann auf jedes Szenario angewendet werden, in dem Sie ein übergeordnetes Element formatieren müssen auf Interaktionen mit untergeordneten Elementen, wie etwa das Ändern der Elementsichtbarkeit oder das Auslösen von Animationen.

Das obige ist der detaillierte Inhalt vonWie kann ich ein übergeordnetes Element formatieren, wenn dessen untergeordnetes Element schwebend ist?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!