«   Previous tip Next tip   »

Chrome DevTools: Trigger a pseudo class (like hover) on an element

Last updated: 30th October 2020
Trigger a pseudo class (like hover) on an element


You can trigger and activate different element states (pseudo classes) through DevTools, for example:

This is particularly helpful when debugging styling issues on a page, such as styles which only appear upon changing state.

How to use this feature

  1. Click the icon labelled :hov in the Styles Pane within the Elements Panel.
  2. Select one or more element states to activate

When you do this, a small orange indicator appears to the left of the node in the DOM tree so you know that its state has changed.

Extra resource

The Styles Pane also has a style rule toolbar which provides quick access to commonly used styling operations.

«   Previous tip Next tip   »

Sign up to receive a developer tip, in the form of a gif, in your inbox each week