Pourquoi :hover ne fonctionne-t-il pas correctement avec les sélecteurs de frères et sœurs adjacents dans les navigateurs Webkit ?

Bogue Webkit avec plusieurs sélecteurs de frères et sœurs adjacents

Dans les navigateurs Webkit (Safari, Chrome), un problème survient lors de l'utilisation du pseudo :hover -classe avec plusieurs sélecteurs de frères et sœurs adjacents. Le code suivant illustre le problème :

div:hover + a + div {}

Lorsque vous survolez le

élément, le style n’est pas appliqué correctement. Cependant, si vous survolez le bouton d'abord, puis

, le style est appliqué comme prévu.

L'ajout d'un sélecteur général de frères et sœurs, tel que :

div:hover ~ div {}

qu'un style soit déclaré ou non, résout le problème.

Une solution de contournement à ce bug du Webkit consiste à simuler une animation sur l'élément body :

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

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

  to {
    padding: 0;
  }
}

Cela peut être vu en action ici : https://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!

chrome safari webkit if for class this animation https bug issue

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment réparer les Divs qui apparaissent dans le désordre malgré une utilisation correcte du z-Index ?Article suivant：Comment réparer les Divs qui apparaissent dans le désordre malgré une utilisation correcte du z-Index ?

Articles Liés

Voir plus

• Comment récupérer la valeur calculée de la famille de polices à l'aide de JavaScript ?
• JavaScript peut-il accéder aux propriétés CSS personnalisées avec des noms invalides ?
• Pouvons-nous accéder aux valeurs des propriétés CSS personnalisées ou invalides en JavaScript ?
• JavaScript peut-il accéder à la valeur des propriétés CSS personnalisées non valides ?
• Comment récupérer les valeurs des propriétés CSS invalides/personnalisées en JavaScript ?