Comment inspecter les pseudo-classes CSS avec firebug?

Question

Je suis aux prises avec un style css a:hover réticent que je ne peux pas remplacer.

J'ai essayé d'inspecter l'élément dans Firebug, mais je ne vois pas pourquoi cela ne fonctionnera pas. Je ne vois même pas comment inspecter correctement l'événement css a:hover dans Firebug.

J'ai vu:
inspection vol stationnaire dans Firebug http://blog.borngeek.com/2010/04/16/hover-inspection-in-firebug/
mais je n'ai pas compris comment reproduire les étapes qui y sont mentionnées.

aussi: Pseudo-Phantoms http://meyerweb.com/eric/thoughts/2009/11/03/pseudo-phantoms/

Comment puis-je inspectent/débogage des classes CSS pseudo comme :hover avec Firebug?

Answer 1

C'est assez facile. Sélectionnez simplement l'élément que vous souhaitez inspecter. Ensuite, à partir du panneau de droite, cliquez sur l'élément de menu Style. Vous pouvez alors sélectionner la classe pseudo :hover

EDIT

est ici une image:

Answer 2

Theres aussi la VÉRIFIER option ELEMENT, juste rightClick sur l'élément plané dans Firefox + Firebug, et thats it. Le menu de style est à la main aussi.

Answer 3

Une technique utile lors de la résolution de problèmes de ce genre peut être de comparer l'état du survol et l'état de non-stationnaire. Ouvrez deux instances du navigateur (une configuration à double ou triple écran est utile), chargez la page sur laquelle vous travaillez dans chaque fenêtre, puis faites ce que JohnP dit dans sa réponse pour afficher les styles pour l'état de hover dans une fenêtre, le non-stationnaire dans l'autre, et et prendre l'analyse à partir de là. Dans Firebug, il est difficile de comparer les styles lorsque la liste déroulante de styles couvre le volet de détails du css. Si vous pouvez afficher le css de l'état stationnaire et non stationnaire dans Firefug en déplaçant la souris sur l'élément sur lequel vous travaillez, une comparaison de cette façon est plus difficile.