Inspecting Hover-state in Firebug or Chrome DevTools

Question

I\'ve got an HTML element that has a CSS hover-state. There\'s a bug with the margin or padding on hover and every time I mouseover, the contents of the element slide a lit

Answer 1

Now you can see both the pseudo-class style rules and force them on elements.

To see the rules like :hover in the Styles pane click the small dotted box button in the top right.

To force an element into :hover state, right click the element.

Alternatively, you can use Event Listener Breakpoints sidebar pane in the Scripts panel and select to pause in mouseover handlers.

Answer 2

For testing :hover states in Chrome

For testing :hover state in Firefox (You need firebug add on)

Answer 3

Here's a screen shot for firebug & those not sharp enough to see agriboz's comment (like me)

Answer 4

Chrome Dev Tools has a built-in :hover state selector in the Elements > Styles panel. You can toggle other pseudo-classes (like :active) there as well.