Wie kann verhindert werden, dass der Hover-Effekt eines übergeordneten Elements ausgelöst wird, wenn man mit der Maus über ein untergeordnetes Element fährt?

Hover-Effekt auf übergeordnete und untergeordnete Elemente

Um die Herausforderung zu bewältigen, den Hover-Effekt eines übergeordneten Elements zu deaktivieren, wenn sich der Cursor über ein verschachteltes untergeordnetes Element bewegt Element, betrachten wir die folgende Lösung:

CSS :has Selector (eingeführt im Jahr 2024)

Mit der Einführung des CSS :has Selector können Sie einen direkt stylen übergeordnetes Element basierend auf dem Hover-Status seines untergeordneten Elements. Zum Beispiel:

.parent:has(.child:hover) {
    background: normal;
}

Dieser Code stellt sicher, dass die Hintergrundfarbe des übergeordneten Elements mit der Klasse „parent“ in ihren ursprünglichen Zustand zurückkehrt, wenn der Cursor über das untergeordnete Element mit der Klasse „child“ fährt.

Geschwisterelement-Trick

Vor dem :has-Selektor bestand eine Problemumgehung darin, ein Geschwisterelement zu verwenden:

<div class="parent">
    <div class="sibling"></div>
    <div class="child"></div>
</div>

Das Geschwisterelement ist mit absoluter Positionierung positioniert, um das untergeordnete Element zu überlappen. Wenn Sie den Mauszeiger über das untergeordnete Element bewegen, wird der Hover-Effekt des Geschwisterelements aktiviert und überschreibt den Hover-Effekt des übergeordneten Elements.

.child:hover ~ .sibling {
    background: #FFF; // Override parent's background color
}

Einschränkungen

Beachten Sie, dass diese Lösungen abhängig sind hängt von der Struktur der verschachtelten Elemente ab und funktioniert möglicherweise nicht in allen Fällen.

Das obige ist der detaillierte Inhalt vonWie kann verhindert werden, dass der Hover-Effekt eines übergeordneten Elements ausgelöst wird, wenn man mit der Maus über ein untergeordnetes Element fährt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!