Force a state
See an element hovered, pressed or focused without holding the pointer there.
See how an element looks hovered, pressed or focused, without holding the pointer there.
- Select an element that has rules for :hover, :active, :focus, :focus-visible or :focus-within. A row of chips at the top of the Code section offers exactly those states.
- Press a chip. The element looks on the page as it would in that state, and its rules move from "rules for other states" into the matched list, with the winners worked out as if the state were real.
- Press it again to turn it off.
Hover, active and focus-within also apply to the element's ancestors, as they would for real. Selecting another element, or turning Nitpique off, puts the page back.
Nitpique has no way to tell the browser an element is hovered, so it copies the page's rules for those states into a stylesheet of its own and marks the element with a data-nitpique-force attribute. Rules from stylesheets served by another origin cannot be read and nested CSS rules are not copied; both are left as they are.
Questions
Which states can I force?
:hover, :active, :focus, :focus-visible and :focus-within, whichever the element has rules for.
Does forcing a state change the page?
Nitpique copies the page's rules for that state into a stylesheet of its own and marks the element. With Precision mode on in Chrome, Chrome itself puts the element in that state instead. Selecting another element, or turning Nitpique off, puts the page back.