Überprüfen des Hover-Status in Firebug oder Chrome DevTools

Question

Ich habe ein HTML-Element mit einem CSS-Hover-Status. Es gibt einen Fehler mit dem Rand oder Padding bei Hover und jedes Mal, wenn ich mouseover, der Inhalt des Elements ein wenig gleiten, es ist ärgerlich.

Ich möchte mit FireBug oder Chrome Dev Tools debuggen, aber ein häufiges Problem, das ich mit diesen Tools hatte, ist, dass ich, nachdem ich das Element von Firebug/Devtools ausgewählt habe, die Maus natürlich zurück zum Dev bewegen muss Tools und der Hover-Status ist nicht mehr aktiviert.

Wie überprüfe/debugge ich ein HTML-Element mit diesen Tools mit dem Element im Schwebezustand?

Answer 1

Chrome Dev Tools verfügt über einen integrierten: Hover-Status-Selektor im Bereich Elemente> Stile. Sie können dort auch andere Pseudoklassen (wie: aktiv) umschalten.

Answer 2

Hier ist ein Screenshot für Firebug & diejenigen, die nicht scharf genug agriboz Kommentar (wie mich)

Answer 3

Zur Prüfung :hover Zustände in Chrome

zu sehen

Zum Testen :hover Zustand in Firefox (Sie müssen firebug add on)

Answer 4

Jetzt können Sie sehen sowohl die Pseudoklasse Stilregeln und zwingen sie auf Elemente.

Um die Regeln zu sehen wie: schweben Sie im Bereich Stile, klicken Sie auf die Schaltfläche mit den kleinen gepunkteten Feldern oben rechts.

Um ein Element in den Status "Hover" zu versetzen, klicken Sie mit der rechten Maustaste auf das Element.

Alternativ können Sie im Bereich "Skripts" den Bereich "Ereignis-Listener-Haltepunkte" verwenden und in Mouseover-Handlern anhalten.