HTML & CSS
Article
By Craig Buckler

How to Examine CSS :active and :hover States in Firebug

By Craig Buckler

Hands up all those using Firebug. Of course you are. It’d be madness not to. Despite using Firebug almost every day for 5 years, I’m still finding new features and widgets. Here’s one you may have missed…

When inspecting links, Firebug shows the default CSS state, i.e. styles applied to a:link. By default, the :hover and :active styles are not shown. Fortunately, you can change the state of the link by clicking Style and choosing the appropriate option:

Firebug link state

--ADVERTISEMENT--

The CSS for the :hover and/or :active states will magically appear in the console.

The feature is incredibly useful — especially if you’re debugging complex CSS drop-down menus or other effects. Currently, Firebug is the only developer console to support it, although the feature has been added to nightly builds of the webkit inspector. It’ll eventually appear in Chrome and Safari.

Opera’s Dragonfly console is slightly different. If you inspect an element using the right-click menu option, it will have :hover or :focus set accordingly and the CSS styles are displayed. However, navigating the DOM tree will not set the state.

As far as I’m aware, the feature is not available in IE’s Developer Tools — unless anyone knows otherwise?

Do you have any other useful developer console hints?

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the most important and interesting stories in tech. Straight to your inbox, daily.