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

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

Linda Hamilton

Libérer： 2024-10-24 02:42:29

original

1113 Les gens l'ont consulté

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 {}

Copier après la connexion

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 {}

Copier après la connexion

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;
  }
}

Copier après la connexion

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!

source：php

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 inverser le sens du texte en CSS ?

Déclaration de ce site Web

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

Derniers articles par auteur

Derniers numéros

function_exists() ne peut pas déterminer la fonction personnalisée Function test () {return true;} if (function_exists ('test')) {echo "le test est une ...

Depuis 2024-04-29 11:01:01

2445

Comment afficher la version mobile de Google Chrome Bonjour professeur, comment puis-je changer Google Chrome en version mobile ?

Depuis 2024-04-23 00:22:19

2576

La fenêtre enfant exploite la fenêtre parent, mais la sortie ne répond pas. Les deux premières phrases sont exécutables, mais la dernière ne peut pas être implémentée...

Depuis 2024-04-19 15:37:47

2179

Il n'y a aucune sortie dans la fenêtre parent document.onclick = function(){ window.opener.document.write('Je suis la sortie de la fenêt...