Warum kann WebKit keine :hover-Stile auf mehrere benachbarte Geschwisterelemente anwenden?

WebKit-Problem: Hover-Pseudoklasse mit mehreren Adjacent-Sibling-Selektoren

Webbrowser stoßen häufig auf Herausforderungen beim Umgang mit der :hover-Pseudoklasse in Verbindung mit benachbarten Geschwisterselektoren. Insbesondere WebKit (Safari und Chrome) hat Schwierigkeiten beim Anwenden von :hover-Stilen auf eine Reihe benachbarter gleichgeordneter Elemente.

Herausforderung:

Das folgende Beispiel veranschaulicht das Problem :

div:hover + a + div { /* styles here */ }

In diesem Fall kann WebKit die Stile nicht auf das zweite Div anwenden, wenn die Maus direkt darüber fährt. Wenn sich die Maus jedoch zuerst über dem vorhergehenden Ankerelement und dann über dem zweiten Div bewegt, werden die Stile wie erwartet angewendet.

Lösung:

Eine Problemumgehung für Bei diesem Fehler handelt es sich um eine gefälschte Animation des Body-Elements:

body { -webkit-animation: bugfix infinite 1s; }

@-webkit-keyframes bugfix {
  from { padding: 0; }
  to { padding: 0; }
}

Diese Lösung führt eine triviale Animation ein, die WebKit dazu zwingt, das Body-Element neu zu rendern, wodurch das Problem mit Hover-Pseudoklassen und mehreren benachbarten Geschwistern gelöst wird Selektoren.

Das obige ist der detaillierte Inhalt vonWarum kann WebKit keine :hover-Stile auf mehrere benachbarte Geschwisterelemente anwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!