17

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!

Improve this question

3 Answers 3

Reset to default
28

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

which version of chrome is this?
do you know if it's available on any more stable versions? beta? dev?
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.

Improve this answer

5 Comments

this is almost impossible on very small elements, thanks for the tip though
no, not really. just expand the console so that it takes most of the screen. then the rightclick dropdown menu should be partly in the console. then you re done.
I have to admit, I've resorted to similar things in the past.
haha, even that is so annoying. Just goes to show how front end developers have been treated like second hand citizens until recently
yea glad to see new Chrome will implement better things (though it's hard to be faster than that, because it looks but stupid but it actually feels natural and does not add any click to get to the info)
0

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.