Menu
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?
465
Here is how to view the CSS hover state for an element with the Chrome developer tools and element selector. Click that and then choose the element you want to see/modify the hover state off. You can now see and modify the hover state for that CSS element.
Simply remove the class which is adding the hover effect to the element using JavaScript by . classList.
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.
177
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
