Hover effects and interactivity

1) Guidance role in UX

• "Is it interactive?" (hover/cursor/highlight)
• "Where am I?" (focus style),
• "What happens by click?" (status and affordance),
• "Did the action work?" (active/pressed and subsequent feedback).

Principle: Effects reinforce meaning, not replace it. Key information and access to the action should not be hidden only behind the hover.

2) State model and semantics

Base set: 'default' → 'hover' → 'focus' → 'active/pressed' → 'disabled' → 'loading' (optional).
For links we add 'visited', for switches - 'checked'.

• Between states - a visual difference in shape/thickness/icon, not just color.
• Text/icon contrast to background: ≥ 4. 5:1 (plain text), ≥ 3:1 (large/bold).
• Focus is visible without pointing (keyboard/screen reader).

3) Devices and media requests

css
/ There is an exact pointer and hover (mouse/trackpad )/
@ media (hover: hover) and (pointer: fine) {/hover effects/}

/ No hover or rough pointer (touch/remote control )/
@ media (hover: none), (pointer: coarse) {/alternatives to hover/}

/ Any type of pointer (hybrid devices )/
@ media (any-hover: hover) {/minimal improvements/}

• On touch devices, pointing effects are not critical for detecting action - use explicit affordances: color/icon/frame/hint.
• Do not hide navigation/controls only "under hover."

4) Durations and curves

• Hover: 120-180ms
• Focus: 120-180ms
• Active/Pressed: 80–120 мс
• Ripple/ink (if used): ≤ 240 ms, 1 cycle

The default curve is' cubic-bezier (0. 2, 0, 0. 2, 1)`

Active - faster ('cubic-bezier (0. 4, 0, 1, 1) '), the output is softer (' cubic-bezier (0, 0, 0. 2, 1)`).

5) Design system tokens (example)

json
{
"interactive": {
"duration": { "hover": 160, "focus": 160, "active": 90 },
"easing": { "std": "cubic-bezier(0. 2,0,0. 2,1)", "acc": "cubic-bezier(0. 4,0,1,1)" },
"shadow": { "hover": "var(--elev-2)", "focus": "0 0 0 3px var(--focus-ring)" },
"opacity": { "disabled": 0. 38, "muted": 0. 64 }
}
}

6) Buttons: reference pattern

Default: readable text ≥ 4. 5:1 to fill.
Hover: − Δ L background 0. 02–0. 04, light shadow, pointer '.
Active: − more Δ L 0. 02–0. 04, shortened shadow/indentation (scale 0. 98), lasts. 80-100 ms.
Focus: contrast ring 2-3 px without blur.
Disabled: курсор `not-allowed`/`default`, opacity ≤ 0. 38, no hover effects.

css
.button {
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.button:hover  { background: var(--btn-bg-hover); box-shadow: var(--shadow-hover); }
}
.button:active  { transform: scale(.98); }
.button:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.button[disabled] { opacity:.38; pointer-events: none; }

7) Links and text actions

Distinguishing not only by color: underline by default or on hover/focus.
For guidance: underline enhancement (thickness/offset), slight change in tone.
'Visited'is a different shade of the same palette, the contrast is preserved.

css a { text-decoration: underline; text-underline-offset:.12em; }
@media (hover:hover) and (pointer:fine) {
a:hover { text-underline-offset:.2em; }
}
a:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }

8) Cards, lists, tables

• Hover: soft shadow/frame highlight, cursor'pointer' only if the whole card is clickable.
• Active: short indentation, title highlight.
• Focus: a visible ring around the card, not just inside.

• Hover background with Δ L 0. 02–0. 04; the active row is a clear border.
• Clicks on a line are allowed only with explicit affordance ("→" icon, hint).

• Carefully limit the "ladder" of cascade delays - a maximum of 6-8 elements (stagger 20-30 ms).

9) Input forms and fields

Hover for fields: thin backlighting of the frame (Δ L ~ 0. 05), without changing the block size.
Focus: contrast ring + frame color change; placeholder remains distinguishable (≥ 3:1).
Error: color + icon/text; short "shake" is valid ≤ 6 px, ≤ 140 ms, once.

10) Icons and small targets

Increase the click zone to 32 × 32 (desktop )/40 × 40 (mobile), even if the icon itself is 20-24 px.
Hover: changes opacity/fill/thickness, 1-2 properties maximum.
Active: short "snap" by scale 0. 98.
Focus: ring by click zone container.

11) Accessibility (A11y) and keyboard

Support ': focus-visible' (we do not show focus styles for the mouse, we show them for the keyboard).
Elements that create hover hints must have a focus equivalent (the same content appears on the Tab/Enter key).
Aria-attributes: interactives have 'role', 'aria-pressed '/' aria-expanded '/' aria-current' by situation.
Prefers-reduced-motion: replace scale/shift with minimum (opacity/fill), turn off ripples.

css
@media (prefers-reduced-motion: reduce) {
{ transition-duration:.01ms! important; animation: none! important; }
}

12) Performance

Animate only 'opacity' and 'transform'; avoid'width/height/left/top ', heavy blur/shadows on multiple elements.
Use 'will-change' sparingly; retract after transition completion.
On lists/tables - minimal effects, without "global" repaint.

13) Hover-intent and "stickiness"

• The delay threshold is 80-120 ms before showing a complex tooltip/menu.
• "Stickiness" of the cursor: if the user moves from the item to the menu at an angle, we give 200-300 ms of "corridor" (Fitts triangle).
• With a touch - replace hover with press or an explicit "more" button.

14) Tooltip/menus/dropdowns

Opening: hover-intent (desktop )/press (touch), closing - care/blur/ESC.
Position - to the source, the arrow is aligned; max-width and hyphenation are enabled.
Availability: 'role = "tooltip"', associate 'aria-descripedby'; for menu - 'role = "menu" '+ arrow control.

15) The specifics of iGaming

Coefficients/leadboards: hover highlights the row/cell, but does not change the positioning metrics (without "jumps").
Tournament/bonus cards: hover can "revive" the frame/icon, but the text CTA and conditions remain readable (≥ 4. 5:1).
Responsible notifications (18 +, limits): without distraction effects; hovering only allows underlining of links and clear focus.
Bet/buy buttons: active-feedback is mandatory (visual click/indent) and unambiguous disable after sending.

16) Examples of interface recipes

css
.cta {
background: var(--role-primary);
color: var(--on-primary);
transition: background-color. 16s var(--ease), transform. 09s var(--ease-acc), box-shadow. 16s var(--ease);
}
@media (hover:hover) and (pointer:fine) {
.cta:hover { background: var(--role-primary-hover); box-shadow: var(--elev-2); }
}
.cta:active { transform: scale(.98); }
.cta:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.card { transition: box-shadow. 16s var(--ease), border-color. 16s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.card:hover { box-shadow: var(--elev-2); border-color: var(--border-strong); }
}
.card:focus-visible { box-shadow: 0 0 0 3px var(--focus-ring); }

css
.table tr { transition: background-color. 12s var(--ease); }
@media (hover:hover) and (pointer:fine) {
.table tr:hover { background: var(--row-hover); }
}
.table tr:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: -2px; }

17) Anti-patterns

Hide critical actions/menus only for hover.
Change sizes/layouts on hover (layout jumps).
Rely only on color to distinguish states.
Flicker, endless pulsations, "acid" glow on texts.
Lack of focus styles or their invisibility on a dark theme.
Hover 'pointer' over non-interactive elements.

18) QA checklist

Availability

• All interactives are reachable by keyboard; focus we see.
• Hover content is available by 'focus '/' aria'.
• The contrast of text and icons corresponds to WCAG.

Behavior

• Hover/active/disabled/visited are distinguishable by shape and tone.
• No response delay> 120ms.
• There is an alternative to hover on the touch.

Performance

• Only 'transform '/' opacity' are animated.
• No heavy blur/shadows on multiple elements.
• On long lists, effects are minimized.

19) Documentation in the design system

Status table for basic components (buttons, links, cards, fields, table rows).
Duration/curve/shadow tokens and sample code for light/dark.
"Hover vs Touch" section: rules of alternatives and examples.
"Do/Don't" with short clips and contrast scores.

Brief Summary

Targeting effects are an auxiliary but critical part of the interface language. Keep them brief and predictable, keep the keyboard and touch, provide contrast and visible focus, animate only cheap properties. Then interactivity enhances clarity and speed of action, rather than hindering them.