Force hover state and inspect it

Hover styles vanish the moment you move your cursor to inspect them. Force the state instead, or pause Screen Ruler to open a menu, and read the styles while they stay put.

What it does

Many styles only appear while someone is interacting with the page: a button darkens on hover, a field gets a ring on focus, a link changes color once visited. Screen Ruler can force an element into one of these states so it keeps that look while you inspect it. The states you can force are:

• :hover
• :focus, :focus-visible and :focus-within
• :active
• :visited

The page shows the element in that state, and the side panel's size, box model and CSS update to match.

How to force a state

1. Start Screen Ruler by clicking its toolbar icon, pressing Alt + Shift + S (Option on a Mac), or right-clicking the page and choosing Screen Ruler.
2. Click the element you want to check, such as a button or link.
3. In the side panel's Element tab, open the state menu next to the element's name and choose a state.
4. To go back, choose Default in the same menu.

The state menu only appears when the element has style rules for a state, and it only lists the states that do something. If there is no menu, nothing in the page's readable CSS changes that element on hover, focus or the others. You can force a state on more than one element at a time, and forced states stay in place until you clear them or turn Screen Ruler off.

How forcing works

Screen Ruler finds the rules that style the element in the chosen state, for example .btn:hover, and applies their declarations to that one element with the same precedence the browser would give them. A few details make the preview match real interaction:

• Specificity and !important are respected, so the winning value is the one you would see on a real hover.
• Media queries count. A hover rule inside a media query that does not match the current width is left out, just as the browser would ignore it.
• Pseudo-elements are included, so a ::after underline that appears on hover appears when forced too.
• Web components work. States can be forced on elements inside open shadow roots.

Forcing is scoped to the selected element. Rules where another element's state restyles this one, such as .card:hover .title, are not emulated. Select the card and force its hover instead. Rules in cross-origin stylesheets that Screen Ruler has not been given access to read are not included, and forcing a state is not available inside Responsive Mode.

Pause: interact with the page while inspecting

While Screen Ruler is active, clicks select elements instead of reaching the page. That is what you want most of the time, but not when you need to open a dropdown, a modal or a tab first. Click Pause in the control bar and the page works normally again:

• Clicks, hovers and typing reach the page, so you can open menus, expand accordions and fill in forms.
• Overlays you turned on stay visible, including the rulers, layout grid, breakpoint lines, X-Ray outlines, find highlights and any forced states.
• Selection outlines, distance lines and pinned inspectors are hidden so the page reads cleanly.

Click Pause again to resume. A menu or modal that opened on click stays open, ready to be inspected. For things that only appear while the cursor is over them, forcing :hover is the reliable route, because hover cannot be held while you move the cursor away.

When it is useful

• Design QA of interactive states: check that hover, focus and pressed colors match the spec.
• Accessibility checks: confirm that keyboard focus styles exist and are visible by forcing :focus-visible.
• Copying a hover effect you like from another site, see how to copy CSS from a website.
• Inspecting dropdowns and modals by pausing, opening them, then resuming.

Plans

Forcing a state and Pause work on every plan, including Free. The Source view, which lists the matching CSS rules for the forced state, is part of the Inspect and Studio plans. Editing styles inside a state is part of Edit States & Breakpoints, a Studio feature. Every install starts with a free 7-day trial with everything unlocked, no card required.

Common questions

How do I inspect a hover state in Chrome?

In DevTools you open the Elements panel, select the element, open the :hov menu and tick :hover. With Screen Ruler, click the element on the page and pick :hover from the state menu next to its name in the side panel. The element stays in that state while you read its styles.

Why is there no state menu for my element?

The menu only appears when the element has its own rules for a state. If the hover effect comes from a parent, like .card:hover .title, select the parent and force the state there. Rules in cross-origin stylesheets that Screen Ruler cannot read are not counted either.

How do I inspect a dropdown menu that closes when I move the mouse?

If the menu opens on click, press Pause, open the menu, then press Pause again and inspect it. If it opens on hover, select the element that controls it and force :hover or :focus-within.

Is forcing element states free?

Yes. Forcing a state and using Pause are available on the free plan. Browsing CSS rules is part of Inspect and Studio, and editing styles inside a state is a Studio feature.