Issue:
When using the "While Hovering" interaction on a component, the hover state can become stuck — meaning it remains active even after the cursor leaves the element. This is especially noticeable when hovering over multiple instances of the same component in a prototype. The hover state lingers on all previously hovered items instead of resetting properly.
Steps to Reproduce:
-
Create a component with default and hover variants.
-
Add a “While Hovering → Change to hover” interaction.
-
Place multiple instances of the component in a layout.
-
Preview the prototype.
-
Hover over several instances one after another.
-
Previous components stay in their hover state, even after the cursor leaves.
Expected Behavior:
Only the element currently being hovered should show its hover state. Others should reset to default.
Actual Behavior:
Multiple elements end up stuck in their hover state, even though the cursor is no longer hovering them.
Additional Notes:
This issue was first reported over 4 years ago, and it still hasn’t been resolved. It significantly affects the reliability of interactive prototypes and is disruptive during user testing, as users are confused by lingering UI states that shouldn’t be active.
Some people suggest using "Mouse Enter" and "Mouse Leave" as a workaround, but this doesn’t work well when hover states include buttons that trigger overlays — the hover state disappears too quickly, closing the overlay or breaking the interaction flow.
