How can I see the styles attached to :hover and other pseudo classes in firebug and the chrome debugger

Question

I know there must be a way to do this and I\'ve always just worked around it but, is there some way I can see (and/or edit) the pseudo-class styles applied to an element

Answer 1

In Chrome, you just right click (so that you ARE hovering) the div and click on Inspect. If the Inspect box is in the console, when you right click it, your mouse "fall" in the console and you are still hovering the div at the same time. Then you cqn see the :hover pseudo style normally.

This is stupid, but this is my workaround.

Answer 2

Inspect the element, and then:

For Firebug:

Note that the hover CSS code will disappear if you fly over the element again (you must recheck :hover).

For Chrome:

You can see both the psuedo-class rules and force them on elements.

To see them in the Styles pane click the small dotted box button in the top right.

To force an element into :hover state, right click it.

Answer 3

In Firebug you can select an element using :hover with the blue select arrow tool and you'll be able to see it while you are hovering over the element. Unfortunately when you move your mouse it goes away, but you can see what line it is on and edit the CSS through the firebug css tab after that.