DevTools Tips

Categories: Supported by:

Simulate pseudo CSS classes

If you use :hover, :active, and other such pseudo-classes in CSS, you can actually simulate these states in DevTools without having to hover over or click on buttons and links.

Open the Styles panel (in Chrome, Edge or Safari) or the Rules panel (in Firefox), and click the :hov button. This will expand a section that allows you to lock one or multiple of these pseudo-classes on the selected element.

Screenshot of the :hov panel to simulate various pseudo-classes