How do I inspect CSS pseudo classes with firebug?

Question

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 1

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 :

Answer 2

Theres also the INSPECT ELEMENT option, just rightclick on the hovered element in Firefox + Firebug, and thats it. The style menu is handly too.

Answer 3

A useful technique when resolving issues like this can be to compare the hover state and non-hover state. Open two instances of the browser (a dual or triple screen setup is useful), load the page you're working on in each window, then do what JohnP says in his answer to view the styles for the hover state in one window, the non-hover in the other, and and take the analysis from there. It's awkward in Firebug to compare the styles when the style dropdown covers the actual css detail pane, and whilst you can view the hover and non-hover state css in Firefug by moving the mouse over and off the element you're working on, doing a comparison this way is more tricky.