Comment appliquer les styles :hover aux pseudo-éléments :before et :after ?

:hover Condition pour les éléments :before et :after

Problème

Vous rencontrez des difficultés pour appliquer ":hover" à ":before" éléments. Les tentatives d'utilisation de ":before:hover" se sont révélées inefficaces.

Explication

La syntaxe correcte pour appliquer des styles aux éléments ":before" en fonction du statut ":hover" de l'élément parent est une :hover:before ou a:visited:before. Le pseudo-élément est ajouté à la fin du sélecteur, après la pseudo-classe.

En CSS3, vous pouvez clarifier cette distinction en utilisant des doubles deux-points (::) pour représenter les pseudo-éléments. Par conséquent, la syntaxe correcte devient a:hover::before et a:visited::before. Cependant, les deux-points simples sont toujours acceptables pour les navigateurs existants comme IE8.

Cette syntaxe est dictée par la spécification CSS, qui stipule que des pseudo-éléments doivent être ajoutés à la séquence finale de sélecteurs simples.

Limitation

Notez que l'approche ci-dessus peut ne pas convenir aux pseudo-classes d'action utilisateur telles que ":hover" si vous avez l'intention d'appliquer l'effet uniquement lorsque le le pseudo-élément lui-même interagit avec. Ceci n'est actuellement pas possible via les mécanismes CSS standard. Dans de tels cas, vous devrez peut-être utiliser un élément enfant réel au lieu d'un pseudo-élément pour appliquer ":hover."

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!