2

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?

| |
5

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

| |
  • 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
  • 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
1

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.

| |
  • 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

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.