Keep Disappearing Hover Rules Visible in Chrome DevTools
You move the pointer toward DevTools and the hover rule you wanted disappears, sometimes taking the whole menu with it. How do you keep that state on screen long enough to inspect?
- Use :hov to inspect hover styling without keeping the pointer over the element.
- Inactive-style display retains previously matched rules when they stop applying.
- Use Computed to distinguish those retained rules from the element's current values.
Start with :hov, not a carefully positioned mouse
Select the element in Elements, open Styles, click :hov and enable :hover. Chrome's pseudo-class control applies the state even when the pointer is elsewhere. Clear the checkbox to compare the ordinary state.
For a button that changes color, this gives you a stable view of the selector and declaration responsible. You can move into DevTools without repeatedly losing the CSS state you wanted to inspect.
Retain the rule after it stops matching
The October DevTools recap introduces another useful step: keeping rules that previously matched the selected element visible after they no longer apply. Open Settings → Preferences → Elements and enable Show inactive CSS rules. Use Collapse non-contributing CSS rules to control whether those rules start collapsed. Both controls are registered in the Elements settings.
Forcing hover and retaining inactive rules answer different questions. Forcing hover reproduces the state. Retaining a previously matched rule lets you compare it with what happens after that state ends, including when a class changes. An inactive indicator separates the retained rule from one that currently applies.
Treat the retained rule as a clue about the transition. Its continued presence does not establish that it is responsible for the element's current appearance.
Read the indicator, then check the resolved value
Chrome's CSS diagnostics distinguish declarations overridden by the cascade from valid properties that cannot affect the current layout. Overridden declarations have a strike-through; inactive properties appear dimmed with an information icon.
For example, justify-content has no effect on an ordinary display: block container; increasing selector specificity will not fix that. Read its information tooltip before changing the selector.
Open Computed for the resolved value. For a color mismatch, expand background-color and follow its source. This connects the visible result to a declaration while keeping previously matched rules available as context.
If the element vanishes, preserve the right kind of state
For overlays that hide when focus moves to DevTools, enable Emulate a focused page under Elements → Styles → :hov. It addresses focus-dependent menus and pickers rather than merely retaining their CSS rules.
JavaScript-driven changes may instead require a breakpoint. Chrome's guide to inspecting disappearing elements presents breakpoints alongside pseudo-class and focus controls. Decide whether you are losing a matching rule, page focus or the element itself; that determines which control can preserve the evidence you need.