Force a DOM element state in Chrome DevTools

Tomasz Łakomy
InstructorTomasz Łakomy
Share this video with your friends

Social Share Links

Send Tweet
Published 4 years ago
Updated 3 years ago

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.

egghead
egghead
~ 9 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today