Force a DOM element state in Chrome DevTools
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
Tomasz Łakomy: [0:00] We have a list of elements on this page. In this example, this is a list of folks who have been recording egghead.io lessons, and we can see that we get a different style on :hover.
[0:10] Suppose we would like to modify this :hover state somehow. The problem is that if I select this item in DevTools, I am not able to see the :hover styles right now, because if I hover over the element and go back to DevTools, I am obviously not hovering over this element anymore.
[0:25] There's a way to address that. If we right-click on the element, we can force the state to be as :hover. Right now, we can see the :hover state of this element over here without hovering over it. For instance, I am able to modify the :hover styles by introducing a background-color, so I'm going to set the background to pink, much better.
[0:48] Right now, if I want not to force the :hover state anymore, I can go over here and click on Hover once more. If I hover on any of those elements, I will get this beautiful shade of pink.
[1:01] Bear in mind that we can also force other states, such as :active, :focus, :visited, :focus-within, and :focus-visible.