Firefox: how to stop and inspect new styles added when hovering on an element?

问题

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!

回答1:

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) → :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.

回答2:

Right click - choose "inspect element"

回答3:

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

来源：https://stackoverflow.com/questions/25799429/firefox-how-to-stop-and-inspect-new-styles-added-when-hovering-on-an-element