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

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.