Hover-induced layout changes can occlude the next interaction path

What it is

When hover opens a submenu, card preview, or explanatory layer, the new content can cover the area a person is about to cross or push controls into new positions. This path occlusion makes the pointer leave its trigger, enter a new target, or lose spatial memory of the old location, so feedback intended to aid discovery interrupts the next action.

Why it happens

Overlays and reflow change both hit regions and the visual map. If an overlay lies on the line from parent to child, movement toward the child is interrupted; if layout reflows, the planned endpoint moves. The new layer may immediately become the hover target itself, causing cycles of activation or accidental dismissal.

Studying it

Use realistic parent-to-child, list-to-preview, and fast-scanning tasks; record path deviation, target loss, false triggers, reorientation time, and closing. Compare overlays, reserved space, side-opening, and delayed display, checking reachability at different screen edges and scales.

Where it stops holding

Occlusion is not always harmful: a fixed, noninteractive tip or preview outside the movement path can avoid layout jumping. Banning hover content entirely also loses efficiency. The criterion is whether it changes the next required target, path, or focus—not whether any overlay exists.

Applying it

• Prefer non-reflowing overlays placed away from the predicted pointer path.
• Preserve a reachable corridor or safe region from parent to child so new layers do not cut the route.
• Do not move controls a person is about to click; require click or pin a preview when necessary.

Related

• Same group: C1.20.1 Hover delay requires a concrete value balancing responsiveness and false triggers · C1.20.2 Hover-open menus and hover tooltips need independent delay thresholds · C1.20.3 Briefly crossing multiple targets should not trigger hover content one by one · C1.20.4 An exit grace period prevents hover content from disappearing immediately from tremor
• Nearby: E1 Interface elements and controls · B1 Interaction principles and laws
• Search terms: occlusion · layout shift · hover menu