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

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

Linda Hamiltonoriginal: 2024-10-24 02:42:291115parcourir

Why Doesn't :hover Work Properly with Adjacent-Sibling Selectors in Webkit Browsers?

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