6

I am using Firefox for development.

I would like to see what CSS styles are added to A tag when I hover the mouse over it. How can I do this in Firefox?

UPDATE

I right-clicked on the tag and select inspect the element. I can see the styles added to the bottom right pane. However, if I move the mouse to the css pane to examine styles, then the added CSS styles disappear. I understand that I may need to break on something, but I cannot get it working.

Thanks!

tgogos
  • 23,218
  • 20
  • 96
  • 128
curious1
  • 14,155
  • 37
  • 130
  • 231
  • Docs (as mentioned [here](https://stackoverflow.com/questions/8720254/how-can-i-see-hover-and-active-properties-of-elements-on-a-webpage#comment51148487_8723462)): https://firefox-source-docs.mozilla.org/devtools-user/page_inspector/how_to/examine_and_edit_css/index.html#viewing-common-pseudo-classes – djvg May 08 '23 at 08:40

3 Answers3

7
  1. Right click → Inspect Element
  2. Select the "Inspector" tab
  3. Find the element that you want to examine inside your markup
  4. Right click (on the selected element) → Change Pseudo-class → :hover
  5. Check the CSS Rules tab to see what changes occur.

This is the way to force :hover state when your mouse is not over an element.

tgogos
  • 23,218
  • 20
  • 96
  • 128
0

Right click - choose "inspect element"

JamesJosephFinn
  • 324
  • 3
  • 12
  • I did that many times. I need to break on something, but I simply cannot get it right. Thanks for chiming in! – curious1 Sep 12 '14 at 01:42
0

How easy. Right click on your element than choose "inspect element" option.

hakki
  • 6,181
  • 6
  • 62
  • 106