Pourquoi :hover et plusieurs sélecteurs de frères et sœurs adjacents provoquent-ils des bugs dans Safari et Chrome ?

Bogue Safari et Chrome avec :hover et plusieurs sélecteurs de frères et sœurs adjacents

Dans le développement Web, en utilisant la pseudo-classe :hover et adjacent Les sélecteurs -sibling sont généralement pris en charge par les principaux navigateurs tels que Safari, Chrome, Opera et Firefox. Par exemple, le code suivant fonctionne comme prévu :

a:hover + div {}

Cependant, lorsque plusieurs sélecteurs de frères et sœurs adjacents sont ajoutés, les navigateurs Webkit (y compris Safari et Chrome) présentent un comportement inattendu :

div:hover + a + div {}

Dans de tels cas, Webkit ne parvient pas à appliquer le style comme prévu.

Une solution de contournement pour résoudre ce bug consiste à utiliser une déclaration de style sur l'élément body pour créer un effet d'animation subtil :

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

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

Cette animation n'a aucun effet visible mais déclenche un recalcul de style, permettant aux navigateurs Webkit d'appliquer correctement les styles de sélecteur :hover et adjacent-sibling.

Voici un exemple pour démontrer la solution de contournement : http://jsfiddle. net/jalbertbowdenii/ds2yY/1/.

En employant cette technique, vous pouvez surmonter les bogues du Webkit et garantir un comportement cohérent sur différents navigateurs.

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!