Comment puis-je inspecter les états de survol dans Chrome DevTools ?

Inspection des états :hover dans les outils de développement Chrome

Dans le développement Web, il est souvent nécessaire d'inspecter le style des éléments dans divers états, y compris l'état :hover. Bien que Firebug propose une liste déroulante de styles pratique pour sélectionner différents états, les outils de développement Chrome peuvent sembler insuffisants à cet égard.

Découverte des options d'état cachées : hover

Cependant, les outils de développement Chrome offrent en effet la possibilité de afficher et manipuler les états de survol. Pour accéder à ces options :

• Accédez au volet Styles dans les outils de développement Chrome.
• Cliquez sur le petit texte ":hov" situé dans le coin supérieur droit du volet Styles. Cela affichera une liste de règles de pseudo-classe, y compris :hover.

Forçage :hover State

De plus, vous pouvez forcer un élément à passer à l'état :hover pour une inspection plus facile :

• Cliquez avec le bouton droit sur l'élément dans le panneau Éléments.
• Sélectionnez ":hover" dans le contexte menu. Cela appliquera temporairement les styles :hover à l'élément.

Conseils d'utilisation du panneau Éléments

• Pour revenir à l'état par défaut, cliquez simplement sur ":default" dans la liste déroulante État de l'élément.
• Pour plus d'informations sur l'utilisation du panneau Éléments, consultez les outils de développement Chrome. Raccourcis.

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!