How simulated element states work

States like :hover and :focus only exist while someone is interacting with the page. In the editor that’s a problem: the moment you move the pointer from the canvas to the Style tab to change the hover color, the element stops being hovered and the hover look disappears. Browsers don’t let a web page switch these states on by itself either — only real interaction does.

Handrix gets around this the same way browser developer tools do: it simulates the state. When you choose :hover for an element, Handrix makes the element’s hover rules apply to it as if it were hovered, and keeps them applied until you choose neutral, select something else, or leave the Style tab.

Nothing is saved

The simulation lives only in the editor’s preview. The element isn’t changed, no class is added to it, and your stylesheets aren’t touched. Publishing or exporting the page while a state is forced produces exactly the same result as in neutral.

Where it differs from real interaction

A real hover is never on just one element: hovering a title inside a card also hovers the card, and the page around it. The simulation is narrower — it applies the state to the selected element only, like developer tools do. That’s usually what you want, but it shows in two situations:

• Rules that depend on a parent’s state. .card:hover .title styles the title when the card is hovered. To see it, select the card and force :hover on the card. Forcing :hover on the title does nothing for that rule on the canvas, although the rule may still be listed in the rule selector.
• Ties in the cascade. In rare cases where two rules are equally specific, the simulated state rule can win where, in the real page, a rule written later in the stylesheet would. If the canvas and the published page disagree on such an element, check the rule order in the stylesheet.

Why the rule list follows the state

In neutral, the rule selector lists only the rules that apply to the element right now. Listing every :hover, :focus and :active rule all the time would bury the rules that matter. Choosing a state is the signal that you want to see that state’s rules, so they appear then — and a green dot in the state list tells you in advance which states have something to show.

Related

• Reference: Element state
• How-to: Style an element on hover