Over a million developers have joined DZone.

How to inspect css hover , active property using firebug

DZone's Guide to

How to inspect css hover , active property using firebug

· Web Dev Zone ·
Free Resource

Learn how error monitoring with Sentry closes the gap between the product team and your customers. With Sentry, you can focus on what you do best: building and scaling software that makes your users’ lives better.

I am sure that while Design and Development of a website you definitely want to see the :hover property of an element using your favorite addon in FireFox called Firebug. But I have found that many newbie developers do not know how to see this property. Default settings of firebug shows only the “Default style” and not the “pesudo style”.

To see the pseudo styles follow the steps below -

  1. Activate the element inspector on the link which needs to be updated.
  2. Select the :hover pseudo-class menu item in the Style tab’s drop-down menu (on the right hand panel) as shownin the image below. firebug style hover inspect How to inspect css hover , active property using firebug
  3. Edit the CSS rules as usual.

That is a small but nifty trick. I am sure it will save you some time while debugging CSS. Hope it helps.


From http://www.digimantra.com/firefox/inspect-css-hover-activ-property-firebug

What’s the best way to boost the efficiency of your product team and ship with confidence? Check out this ebook to learn how Sentry's real-time error monitoring helps developers stay in their workflow to fix bugs before the user even knows there’s a problem.


Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}