26

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?

throrin19
  • 17,796
  • 4
  • 32
  • 52
augustin
  • 14,373
  • 13
  • 66
  • 79

3 Answers3

43

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

JohnP
  • 49,507
  • 13
  • 108
  • 140
  • Thanks for the screenshot. I was running firebug 1.4.5 and didn't see it. I installed firebug 1.6.2 instead, and all is well. Thanks again. – augustin Mar 22 '11 at 12:51
  • any idea how to get this working for pseudo classes :before and :after, too? Thx – frequent Aug 09 '11 at 13:43
  • I don't think it can be done for :before and :after. I've only seen it for those two options. – JohnP Aug 09 '11 at 18:25
  • What about :visited? I only see the unvisited css although the link is visited so I'd like to select it manually. – user764754 Jan 06 '16 at 20:37
  • 1
    @user764754 I don't use firebug anymore. But Chrome's dev tool has a `:visited` filter that you can activate. – JohnP Jan 08 '16 at 11:15
0

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.

Chris Halcrow
  • 28,994
  • 18
  • 176
  • 206
0

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

Jeeba
  • 101
  • 12