Step 1

Open Chrome DevTools

  • For macOS:
    • Option + ⌘(command) + J
  • For Windows:
    • SHIFT + CTRL + J
  • For both:
    • right click and click “Inspect”

Step 2

Click on the “Element Selector” tool, and click on any element you want to inspect.

A red arrow pointing to the element selector tool in chrome devtools.
Click on the Element Selector Tool
Hovering over an element after clicking on the element selector tool
Hover your mouse over the element you want to inspect, then click it!

Step 3

Under the Styles tab click on ":hov". It's also called the "Toggle Element State" button.

A red arrow pointing to the toggle element state button. Visually, it looks like :hov.
Click the :hov button

This will open up a drown down menu where you can select every different interactive states an HTML element can have.

A toggle menu with different element interactive states. :active, :focus, :visited, :hover, etc.
Different Toggle states you can inspect on an element
An elements hover state CSS showed in the style panel
What the CSS looks like for a hover state

Wrapping up

Easy! Now you can toggle any of these interactive states on and off.