Take the 2-minute tour ×

When I hit Ctrl + Shift + C to examine a link on my web page in Firebug, it displays its associated on-hover styles in the CSS panel.

However, when I move my mouse away from the examined element (my link), the CSS information on the panel goes away. I want to move the mouse away from the link so I can tinker with the various property values in Firebug.

How can I examine the on-hover properties of the link after I move my mouse away?

share|improve this question

migrated from webapps.stackexchange.com Jan 21 '12 at 9:00


2 Answers 2

up vote 5 down vote accepted

This should do it.

  1. Hit Ctrl + Shift + C over a link on a web page to examine it with Firebug.
  2. Click on the CSS panel.
  3. On the right, hit the arrow to the right of "Style."
  4. Click ":hover."

enter image description here

share|improve this answer
The post looks good but it would be way more useful if you could also complement the image with short explanation in words. (Consider small displays, search engines...) –  Alois Mahdal Jan 22 '12 at 19:32
Thanks! That did it. –  David Faux Jan 22 '12 at 19:37
David, Sorry that you had to write the details.. Would have done that after what Alois said. :) @Alois, will do that from next time. :) –  Bibhas Jan 22 '12 at 19:57
No, thank you for the help :) –  David Faux Jan 23 '12 at 2:55

If you use the inspect button on the Firefox toolbar you can go to the link you want to examine it and click on it to select it. Use the HTML pane to check you have selected the right element. Then, if your mouse is hovering over the link it will show the link hover styles in the CSS pane and if you move the mouse away you will see the normal link styling.

share|improve this answer
Thanks, but how do I examine the :hover CSS styles of the link after I move the mouse away? Suppose I want to make the link bold on hover, so I must edit the CSS panel. If I move my mouse away, the hover styles go away right? –  David Faux Jan 21 '12 at 22:03

Your Answer


