How to inspect css hover , active property using firebug
How to inspect css hover , active property using firebug
Join the DZone community and get the full member experience.
Join For FreeJumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
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 -
- Activate the element inspector on the link which needs to be updated.
- 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.
- 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
Take a look at the Indigo.Design sample applications to learn more about how apps are created with design to code software.
Like This Article? Read More From DZone
Opinions expressed by DZone contributors are their own.
{{ parent.title || parent.header.title}}
{{ parent.tldr }}
{{ parent.linkDescription }}
{{ parent.urlSource.name }}