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

Inspecter : survoler les styles dans les outils de développement Chrome

Lors de l'inspection des styles d'un élément dans Chrome, vous souhaiterez peut-être afficher les styles appliqués. lorsque l'élément est dans l'état :hover. Contrairement à Firebug, qui fournit une liste déroulante pratique pour sélectionner les états des éléments, les outils de développement de Chrome peuvent sembler manquer de cette fonctionnalité.

Trouver la cachette

N'ayez crainte ! Les outils de développement Chrome vous permettent en effet d'inspecter les styles :hover.

Pour accéder à ces styles, accédez au panneau Éléments dans les outils de développement Chrome et cliquez sur le petit texte ":hov" affiché dans le coin supérieur droit. du volet Styles. Cela basculera l'affichage des règles de pseudo-classe, y compris :hover.

Forcer l'état de survol

De plus, vous pouvez forcer un élément dans le :hover État pour une inspection plus facile. Cliquez avec le bouton droit sur l'élément et sélectionnez ":hover" dans le menu contextuel. Cela appliquera les styles :hover à l'élément, vous permettant d'observer leurs effets.

Ressources supplémentaires

Pour plus d'informations sur le panneau des éléments dans Chrome Developer Outils, reportez-vous au guide complet sur les 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!