Pourquoi WebKit ne parvient-il pas à appliquer les styles :hover sur plusieurs éléments frères et sœurs adjacents ?

Problème WebKit : survolez une pseudo-classe avec plusieurs sélecteurs de frères et sœurs adjacents

Les navigateurs Web rencontrent généralement des difficultés pour gérer la pseudo-classe :hover dans en conjonction avec des sélecteurs de frères et sœurs adjacents. En particulier, WebKit (Safari et Chrome) rencontre des difficultés lors de l'application des styles :hover à une série d'éléments frères adjacents.

Défi :

L'exemple suivant illustre le problème :

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

Dans ce cas, WebKit ne parvient pas à appliquer les styles au deuxième div lorsque la souris le survole directement. Cependant, si la souris survole d'abord l'élément d'ancrage précédent, puis survole le deuxième div, les styles sont appliqués comme prévu.

Solution :

Une solution de contournement pour ce bug implique une fausse animation sur l'élément body :

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

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

Cette solution introduit une animation triviale qui oblige WebKit à restituer l'élément body, résolvant ainsi le problème des pseudo-classes de survol et de plusieurs frères et sœurs adjacents sélecteurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!