Controllo dello stato del passaggio del mouse in Firebug o Chrome DevTools

Question

Ho un elemento HTML con uno stato del passaggio del mouse CSS. C'è un bug con il margine o il padding al passaggio del mouse e ogni volta che topo il mouse, il contenuto dell'elemento scivola un po ', è fastidioso.

Vorrei eseguire il debug utilizzando FireBug o Chrome Dev Tools, ma un problema comune che ho riscontrato con questi strumenti è che dopo aver selezionato l'elemento da Firebug/devtools ho ovviamente bisogno di spostare il mouse indietro allo sviluppatore gli strumenti e lo stato di hover non sono più abilitati.

Come si ispeziona/esegue il debug di un elemento HTML utilizzando questi strumenti con l'elemento nel suo stato di passaggio del mouse?

Answer 1

Chrome Dev Tools ha un selettore incorporato: hover state nel pannello Elementi> Stili. È possibile attivare anche altre pseudo-classi (come: attivo).

Answer 2

Ecco una schermata per Firebug & chi non forte abbastanza per vedere il commento di agriboz (come me)

Answer 3

per i test :hover stati in Chrome

Per il test :hover stato nel Firefox (È necessario firebug add on)

Answer 4

ora è possibile vedere sia le regole di stile pseudo-classi e costringerli su elementi.

Per vedere le regole del tipo: passa il mouse nel riquadro Stili e fai clic sul piccolo pulsante a riquadri in alto a destra.

Per forzare un elemento in: hover state, fare clic con il pulsante destro del mouse sull'elemento.

In alternativa, è possibile utilizzare il riquadro della barra laterale dei punti di interruzione del listener eventi nel pannello Script e selezionare per mettere in pausa i gestori del mouseover.