Hover and disabled must not appear together

What it is

Disabled means it cannot activate now. Hover means “you are on it, it can activate.” Both at once—a disabled button lighting hover color and a hand cursor—says clickable on one channel and not on the other. In the state combination, hover and disabled must not appear together: disabled swallows hover rather than stacking it.

Why it happens

Disabled is an absorbing state: once entered, transient pointing states should not be shown, or the transient will overwrite the absorbing. The usual implementation hole is cascade: :hover written after :disabled, or pointer-events still live, so a dead key walks into hover rules. People take cursor glyph and a brightness change as fast evidence of clickability; grey in the label is too slow to win. If assistive technology still parks focus on the disabled control and speaks it as activatable, the clash enters audition too. Touch has no hover, but a keyboard focus ring that paints “operable” on a disabled key brings the clash back on another channel.

Studying it

Move the pointer onto a clearly disabled button. Log appearance, cursor, and whether a click event fires. Also Tab onto the disabled key.

Independent variables: cascade order of :hover and :disabled, pointer-events: none or not, whether focus can land on disabled. Dependent variables: rate of hover appearance, attempted clicks, disabled reported as clickable.

A static disabled sample never shows the combination. Pointer-enter has to be a step.

Where it stops holding

Some flows allow a disabled key to take focus so “why not” can be read. A focus ring may stay; it must not borrow hover highlight. A tooltip that explains disable on pointer-enter is an explanation, not a hover state—keep the disabled look, do not light up as clickable. A loading lock is not disabled; pointer changes while loading are a different case.

Applying it

• Let disabled rules win over hover; selectors must not let both apply.
• Use the default arrow cursor while disabled, not a hand; clicks neither fire the action nor play press.
• If focus remains so the reason can be read, give the ring an “unavailable” look rather than the operable focus style.
• Verify by sliding the pointer across a row that includes a disabled control. A flash of light or a hand on that one means hover already stacked.

Related

• Within the group: E1.11.1 The five states must be checked per theme, not inverted from light · E1.11.2 A disabled icon button must fade both glyph and type · E1.11.3 Contrast of states must be rechecked on every container background
• Adjacent: E1.02 Button states · D1.05 Hover feedback · D1.07 Disabled state
• Search terms: disabled hover · :disabled · state combinatorics