Warum verursachen :hover und mehrere Selektoren für benachbarte Geschwister Fehler in Safari und Chrome?

Safari- und Chrome-Bug mit :hover und mehreren Adjacent-Sibling-Selektoren

In der Webentwicklung unter Verwendung der :hover-Pseudoklasse und angrenzend -sibling-Selektoren werden im Allgemeinen von gängigen Browsern wie Safari, Chrome, Opera und Firefox unterstützt. Beispielsweise funktioniert der folgende Code wie vorgesehen:

a:hover + div {}

Wenn jedoch mehrere benachbarte Geschwisterselektoren hinzugefügt werden, zeigen Webkit-Browser (einschließlich Safari und Chrome) unerwartetes Verhalten:

div:hover + a + div {}

In solchen Fällen wendet Webkit den Stil nicht wie erwartet an.

Eine Problemumgehung zur Behebung dieses Fehlers besteht darin, eine Stildeklaration für das Body-Element zu verwenden, um einen subtilen Animationseffekt zu erzeugen:

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

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

Diese Animation hat keinen sichtbaren Effekt, löst jedoch eine Neuberechnung des Stils aus, sodass Webkit-Browser die Auswahlstile :hover und angrenzende Geschwister korrekt anwenden können.

Hier ist ein Beispiel zur Veranschaulichung der Problemumgehung: http://jsfiddle. net/jalbertbowdenii/ds2yY/1/.

Durch den Einsatz dieser Technik können Sie die Webkit-Fehler überwinden und ein konsistentes Verhalten über verschiedene Browser hinweg sicherstellen.

Das obige ist der detaillierte Inhalt vonWarum verursachen :hover und mehrere Selektoren für benachbarte Geschwister Fehler in Safari und Chrome?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!