Wie kann ich mit reinem CSS den Hover-Effekt eines übergeordneten Elements deaktivieren, wenn der Mauszeiger über dessen untergeordnetem Element bewegt wird?

Parent Hover Off When Child Hovered: Ein reiner CSS-Ansatz

In unserer HTML-Struktur haben wir zwei verschachtelte

Elemente: .parent als äußerer Container und .child als inneres Element. Wenn sich der Mauszeiger über .parent bewegt, ändert sich die Hintergrundfarbe standardmäßig in Hellblau. Unser Ziel besteht jedoch darin, den Hintergrund von .parent auf seine ursprüngliche graue Farbe zurückzusetzen, wenn der Cursor über .child schwebt.

Leider fehlt den CSS-Selektoren derzeit die Funktionalität, ein übergeordnetes Element basierend auf dem Status seines untergeordneten Elements zu formatieren. Um diese Einschränkung zu umgehen, verwenden wir eine clevere Technik mit einem zusätzlichen Geschwisterelement.

In unserem CSS definieren wir das .parent-Element mit seinen Abmessungen und Auffüllungen sowie einem grauen Hintergrund. Wenn Sie mit der Maus über .parent fahren, wird der Hintergrund hellblau.

Der entscheidende Teil ist das .child-Element. Wir positionieren es in einem Abstand über seinem übergeordneten Element mit negativen Rändern (oben: -200 Pixel;) und geben ihm einen dunkelgrauen Hintergrund, der beim Schweben in Schwarz übergeht.

Abschließend stellen wir das .sibling-Element vor. Dabei handelt es sich um ein Platzhalterelement, dessen Position und Größe an .child angepasst sind, das sich jedoch leicht links und darüber befindet. Es verfügt außerdem über einen farbigen Hintergrund, der beim Schweben in Weiß übergeht.

Wenn der Mauszeiger über .child schwebt, wechselt die Hintergrundfarbe des .child-Elements zu Schwarz. Gleichzeitig führt dies dazu, dass das .sibling-Element den Teil von .parent überlappt und abdeckt, über dem sich zuvor der Mauszeiger befand. Da .sibling transparent ist, wird der ursprüngliche graue Hintergrund von .parent wieder sichtbar.

Wenn Sie mit der Maus über .child fahren, wird es schwarz und verbirgt den zuvor hervorgehobenen Teil von .parent. Dadurch entsteht die Illusion, dass der Hintergrund von .parent wieder seine ursprüngliche Farbe angenommen hat, obwohl er hinter .sibling tatsächlich immer noch grau ist.

Trotz der Einschränkungen von reinem CSS in dieser Situation bietet diese Technik eine elegante und Effektive Lösung zum Deaktivieren des Hover-Effekts auf einem übergeordneten Element, wenn Sie mit der Maus über dessen untergeordnetes Element fahren.

Das obige ist der detaillierte Inhalt vonWie kann ich mit reinem CSS den Hover-Effekt eines übergeordneten Elements deaktivieren, wenn der Mauszeiger über dessen untergeordnetem Element bewegt wird?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

css html define using finally default this position padding background

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn