How to inspect css hover , active property using firebug

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