25

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?

Improve this question
1
  • For Firefox dev tools, see this answer. Commented Jun 19, 2015 at 9:14

3 Answers 3

Reset to default
42

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

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

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.
any idea how to get this working for pseudo classes :before and :after, too? Thx
I don't think it can be done for :before and :after. I've only seen it for those two options.
What about :visited? I only see the unvisited css although the link is visited so I'd like to select it manually.
@user764754 I don't use firebug anymore. But Chrome's dev tool has a :visited filter that you can activate.
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.

Improve this answer

Comments

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.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.