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

Tweet

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?

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://blogtechguy.com/ Joel Williams

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

  • http://twitter.com/TraceyHolinka Tracey Holinka

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

  • http://www.tyssendesign.com.au John Faulds

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

  • http://twitter.com/PauldeWouters PauldeWouters

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

  • http://www.itmitica.com/en IT Mitică

    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?

  • http://www.pachnerweb.at Patrick Pachner

    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

  • http://www.facebook.com/profile.php?id=648466645 Rick Davies

    Bo!

  • http://www.facebook.com/profile.php?id=648466645 Rick Davies

    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! :)

  • http://www.itmitica.com/en IT Mitică

    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.

  • http://www.itmitica.com/en IT Mitică

    No problem.

  • http://twitter.com/craigbuckler Craig Buckler

    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…

    • http://pulse.yahoo.com/_L5AVXSH7OFHI5YSAJYCO2GGCDU Savannah Hogan

      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

  • http://cumulusapps.com.au Damian Saunders

    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
    Damian

  • mk

    Thanks, such a useful tutorial!