Feedback & Interaction · What a tap feels like
Sibling dim on hover悬停让其它项退让
- clear focus
- quiet
- restrained
Hover one row of a list and it is the other rows that move: they dim, shrink slightly and step aside, so the one under the pointer reads as pushed forward. Move away and they all come back together.
When to use it
Use it where options need a clear hierarchy — navigation, pricing tiers, form choices. Do not use it on lists people read row by row; dimming makes the content unreadable.
Parameters
siblings opacity .38 · scale .96 · shift 6px · 220ms ease-out · hovered row stays put
Recipe
Sibling dim on hover → 220ms ease-outSibling dim on hover → siblings opacity .38 · scale .96 · shift 6px · hovered row stays put
One sentence for your AI
Make the list subtract on hover: when the pointer rests on one row, drop the other rows to opacity .38, scale .96 and push them 6px aside over 220ms ease-out. Leave the hovered row itself almost unchanged — a slight lift at most. Restore everything on leave.