Comment afficher et manipuler les styles :hover dans Chrome DevTools ?

Affichage de l'état de survol dans les outils de développement Chrome

Contrairement à Firebug, qui fournit une liste déroulante de style dédiée pour sélectionner les états des éléments, les outils de développement Chrome proposent une méthode plus subtile pour مشاهده : survoler styles.

Solution :

Pour accéder aux règles :hover et manipuler leurs états :

1. Activer l'affichage des pseudo-classes. : Cliquez sur le petit texte ":hov" en haut à droite du volet Styles. Cela affichera les règles :hover à côté des règles CSS habituelles.
2. Forcer :hover State : Cliquez avec le bouton droit sur l'élément souhaité dans le panneau Éléments et sélectionnez ":hover" dans le menu contextuel. . Cela forcera l'élément à passer en survol, vous permettant d'inspecter ses styles appliqués.

Conseils supplémentaires :

• Pour plus de raccourcis clavier et fonctionnalités dans le panneau Éléments, reportez-vous à la documentation des raccourcis des outils de développement Chrome.
• Comme alternative, vous pouvez utiliser l'extension Chrome "Toggle Element State" pour basculer rapidement entre les différents états des éléments.

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!