给反馈
悬停卡片
Hover Card
「悬停出来的卡片」「鼠标放上去的名片」「悬停浮现的资料卡」「指着头像出来的卡片」「hover出来的简介卡」「放一会儿浮出的小卡」「鼠标悬停的资料弹层」
LIVE DEMO真实可交互，动手试试
设计者 @jane
- 英文名
- Hover Card
- 别名 · 俗称
- 悬停预览卡悬浮资料卡悬停名片shadcn: HoverCard
- Web 叫法
- HoverCard
- 大白话定义
- 鼠标悬停在名字或头像上一小会儿，浮出一张带详细信息的小卡片，移开就收。
- 部位拆解
- 触发元素 Trigger被悬停的名字、头像或链接
- 卡片容器 Card浮出的小面板，放头像、简介和按钮
- 延迟 Delay悬停片刻才出现，防止路过误触
提示词已按当前平台组织好，复制粘贴给 AI 即可
Web
在用户头像上加悬停卡片（HoverCard）：悬停 300ms 浮出名片卡，显示头像、昵称和「关注」按钮，移开后收起
调试 Prompt组件不听话时用——把症状补在末尾一起发给 AI
调试我的悬停卡片（HoverCard）。逐一排除：触发元素和卡片之间有间隙，鼠标移过去中途掉出 hover，卡片一闪就没；快速划过一排头像时延迟逻辑失控，卡片疯狂闪烁；贴视口边缘不翻转，卡片被裁掉一半；页面滚动时卡片位置不跟随，悬在半空。症状是：