Comment résoudre le bogue du kit Web des sélecteurs :hover et Adjacent-Sibling ?

Comprendre et résoudre le bug de Webkit avec :hover et les sélecteurs de frères et sœurs adjacents

Dans les navigateurs Webkit (par exemple, Chrome, Safari), un bug se produit lors de l'utilisation de la pseudo-classe :hover avec plusieurs sélecteurs de frères et sœurs adjacents. Plus précisément, l'effet de survol ne sera pas appliqué comme prévu lorsqu'un troisième frère ou sœur adjacent est introduit.

Par exemple :

a:hover + div {}

Ce code fonctionne parfaitement. Cependant, l'ajout d'un autre sélecteur de frère adjacent :

div:hover + a + div {}

Crompt le comportement prévu dans les navigateurs Webkit.

Curieusement, si vous survolez d'abord l'élément d'ancrage, puis l'élément div, le style est appliqué correctement. De plus, l'inclusion du sélecteur adjacent ~ frère résout le problème, même si aucun style n'est déclaré :

div:hover ~ div {}

Pour résoudre ce bug, vous pouvez implémenter une solution de contournement en simulant une animation sur l'élément body :

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

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

En déclenchant une animation vide sur le corps, vous pouvez efficacement contourner le bug. Vous pouvez vérifier la solution sur ce JSFiddle : http://jsfiddle.net/jalbertbowdenii/ds2yY/1/

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!