Wie behebt man den Webkit-Fehler „:hover' und „Adjacent-Sibling Selectors'?

Webkit-Fehler mit :hover und Adjacent-Sibling-Selektoren verstehen und beheben

In Webkit-Browsern (z. B. Chrome, Safari) ein Fehler entsteht, wenn die Pseudoklasse :hover neben mehreren benachbarten Geschwisterselektoren verwendet wird. Insbesondere wird der Hover-Effekt nicht wie erwartet angewendet, wenn ein drittes benachbartes Geschwisterelement eingeführt wird.

Zum Beispiel:

a:hover + div {}

Dieser Code funktioniert einwandfrei. Das Hinzufügen eines weiteren benachbarten Geschwisterselektors:

div:hover + a + div {}

Unterbricht das beabsichtigte Verhalten in Webkit-Browsern.

Merkwürdigerweise ändert sich der Stil, wenn Sie den Mauszeiger zuerst über das Ankerelement und dann über das div-Element bewegen korrekt angewendet wird. Darüber hinaus wird das Problem durch das Einschließen des angrenzenden ~-Geschwisterselektors behoben, auch wenn kein Stil deklariert ist:

div:hover ~ div {}

Um diesen Fehler zu beheben, können Sie eine Problemumgehung implementieren, indem Sie eine Animation auf dem Body-Element simulieren:

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

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

Indem Sie eine leere Animation am Körper auslösen, können Sie den Fehler effektiv umgehen. Sie können die Lösung in diesem JSFiddle überprüfen: http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

Das obige ist der detaillierte Inhalt vonWie behebt man den Webkit-Fehler „:hover' und „Adjacent-Sibling Selectors'?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!