How to inspect the CSS of an elements hover and interactive states with Chrome DevTools

A quick and easy tutorial on how to view any interactive state with Chrome's DevTools.

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.