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

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?

  • Genius, thanks. How I missed that for so long I don’t know!

  • Agghhh. So much time wasted by not know that. Can’t believe I missed it!

  • Yeah not in Webkit Inspector at the moment but Inspector does show you ::before and ::after pseudo-elements which Firefox doesn’t.

  • oh my! I’ve been wishing for this for a long time!

  • How to examine Mozilla specific styles (-moz): go to “Computed” tab (the next one after “Style”) and check the “Show Mozilla specific styles” option.

  • Anonymous

    Any way to trigger JavaScript hover event?

  • Great hidden feature…

  • Anonymous

    You can also see the hover by hovering over the element when you have firebug open. It will change from the standard class to the hover class. But thanks for this extra tip, didn’t know about it either haha

  • Bo!

  • Bo!

  • Eli

    Absolutely a useful feature and something I have been looking for for some time now. Thing is, I made the switch to Chrome some time ago and have fallen in love with Chrome’s inbuilt “inspect element”. So yeah, looking forward to seeing this feature in Chrome.

    • Andreas

      Can mention it is already implemented in the dev version of Chrome, so you don’t have to wait long! :)

  • Actually, that’s Firebug 1.8.0b6. Beta not Alpha. But yes, starting with 1.80a3, problem is solved.

    And you also need FF 6.0b3.

    Why all this? Because FF was the main problem here. The pseudo-elements issue goes back a few years, but FF6 is about to change all this.

  • No problem.

  • Well spotted.

    When I wrote the article I did wonder whether it was me being dumb for not noticing the feature years ago. It appears that few other users realised it was there…

    • I just paid $22.87 for an iPad2-64GB and my girlfriend loves her Panasonic Lumix GF 1 Camera that we got for $38.76 there arriving tomorrow by UPS. I will never pay such expensive retail prices in stores again. Especially when I also sold a 40 inch LED TV to my boss for $675 which only cost me $62.81 to buy. Here is the website we use to get it all from, CoolCent. com

  • I think you just made my day!

    I’ve been pulling my hair out trying to style an element that’s a hover state, without success…until now.

    Cheers, good work, much appreciated

  • mk

    Thanks, such a useful tutorial!

Get the latest in Front-end, once a week, for free.