CODEWITHSUNDEEP
htmlfirebuggoogle-chrome-devtools
reach4thelasers
reach4thelasers

Reputation: 26909

Inspecting Hover-state in Firebug or Chrome DevTools

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 little, its annoying.

I'd like to debug using FireBug or Chrome Dev Tools, but a common problem I've had with these tools is that after I select the element from Firebug/devtools I obviously need to move the mouse back to the dev tools and the hover state is no longer enabled.

How do I inspect/debug an HTML element using these tools with the element in its hover state?

Upvotes: 11

Views: 7736

Answers (4)

k3060
k3060

Reputation: 47

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.

Upvotes: 0

Subodh Ghulaxe
Subodh Ghulaxe

Reputation: 18671

For testing :hover states in Chrome

enter image description here

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

enter image description here

Upvotes: 6

Ben
Ben

Reputation: 2045

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

enter image description here

Upvotes: 5

ajm
ajm

Reputation: 20105

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.

Upvotes: 10

Related Questions