Force a DOM element state in Chrome DevTools

InstructorTomasz Łakomy

Share this video with your friends

Send Tweet

Sometimes when debugging our CSS styles it's useful to be able to see what a DOM element is going to look like in a given state (e.g. :focus, :active, :hover`) etc.

Unfortunately it's not possible to both hover over an element and debug it in Chrome DevTools at the same time (since we only have a single cursor!).

In this quick lesson we're going to learn how to address this problem by explicitly forcing an element state to :hover with DevTools