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