How do I inspect CSS pseudo classes with firebug?

css firebug hover pseudo-class
augustin picture augustin · Mar 22, 2011 · Viewed 7.3k times · Source

I am struggling with a reluctant a:hover css style which I cannot override.

I tried to inspect the element in Firebug, but I cannot see why it won't work. I don't even see how to properly inspect a:hover css event in Firebug.

I have seen:
Hover Inspection in Firebug http://blog.borngeek.com/2010/04/16/hover-inspection-in-firebug/
but I have not figured out how to reproduce the steps mentioned there.

Also: Pseudo-Phantoms http://meyerweb.com/eric/thoughts/2009/11/03/pseudo-phantoms/

How do I inspect/debug CSS pseudo classes like :hover with Firebug?

Answer

JohnP picture JohnP · Mar 22, 2011

It's pretty easy. Just select the element you want to inspect. And then, from the panel on the right side, click on the Style menu item. There you can select the pseudo class :hover

EDIT

Here's an image : enter image description here

Related questions

How to debug CSS/Javascript hover issues

I often find myself wanting to debug CSS layout issues that involve DOM changes caused by Javascript in reaction to a hover event or different CSS rules applying due to the :hover selector. Normally, I'd use Firebug to inspect the …

Read More
Can you make hovered state in Firebug "sticky?"

When I'm debugging a site, sometimes the hovered selectors are a little long winded and similar to other ones, is there a way to apply a kind of "sticky" state to hover rules in Firebug? Example; I hover over a …

Read More
Firebug-like debugger for Google Chrome

Is there anything like Firebug that you can use within Google Chrome? Essential features I would like: Inspect HTML source (select elements, delete them, etc.) check CSS values (the built-in solution is weird, somehow)

Read More