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?

For example, Im looking to edit .myclass:hover or #someid:active in the debugger.

ps. Im really more concerned with how to do this in the chrome debugger although firebug is appreciated to!

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.