Comment résoudre le bug de Webkit avec :hover et plusieurs sélecteurs de frères et sœurs adjacents ?-tutoriel CSS-php.cn

Comment résoudre le bug de Webkit avec :hover et plusieurs sélecteurs de frères et sœurs adjacents ?

DDD

Libérer： 2024-10-23 22:50:29

original

135 Les gens l'ont consulté

How to Resolve Webkit Bug with :hover and Multiple Adjacent-Sibling Selectors?

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

Dans les navigateurs tels que Safari et Chrome, la pseudo-classe :hover fonctionne correctement avec les sélecteurs de frères et sœurs adjacents, tels que a:hover div. Cependant, un bug survient lorsque plusieurs sélecteurs de frères et sœurs adjacents sont utilisés, comme dans div:hover a div.

Le problème

Dans les navigateurs Webkit, le div:hover a div selector a mal fonctionné, échouant pour appliquer un style au

élément comme prévu. Paradoxalement, l'ajout d'un combinateur frère, tel que div:hover ~ div, avec ou sans style, a inexplicablement résolu le problème.

Solution

Pour contourner ce bug du Webkit, vous pouvez utiliser une technique impliquant animation sur l'élément corps. En attachant une classe CSS animée à l'élément body avec une animation vide, vous pouvez efficacement inciter le navigateur à résoudre le bug :

<code class="css">body {
  -webkit-animation: bugfix infinite 1s;
}

@-webkit-keyframes bugfix {
  from {
    padding: 0;
  }
  to {
    padding: 0;
  }
}</code>

Copier après la connexion

Cette solution fonctionne en déclenchant un nouveau rendu de la page, ce qui force Webkit pour résoudre correctement les sélecteurs frères et sœurs. Vous pouvez voir un exemple de cette solution de contournement en action sur JS Fiddle : 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!

Php8, je viens aussi

Apprenez la mise en page d'un site Web en 30 minutes

Tutoriel vidéo Shangguan Oracle débutant à compétent

Votre première ligne de code UNI-APP

Flutter de zéro au lancement de l'application

Brother Lian Nouveau didacticiel vidéo Linux

Tutoriel vidéo AXURE 9 (convient à l'interface utilisateur interactive de conception de produits du chef de produit)

Tutoriel vidéo PS Zero Basic Proficiency

Tutoriel vidéo de 16 jours sur l'interface utilisateur pour vous aider à démarrer

Tutoriel vidéo sur les techniques PS et les techniques de découpage

Tutoriel vidéo sur la construction et le lancement de projets d'Alibaba Cloud Environment

Présentation des réseaux informatiques - Connaissances de base que les programmeurs doivent maîtriser

Tutoriel essentiel pour les programmeurs - Explication du protocole HTTP

Tutoriel vidéo Websocket

Comment résoudre le bug de Webkit avec :hover et plusieurs sélecteurs de frères et sœurs adjacents ?

Le problème

Solution