COMPONENT 54 · Overlays & Disclosure

悬浮信息卡

Hover Card

也叫Preview CardProfile Card悬停卡片

悬停或聚焦链接时显示相关实体的丰富预览。

Shows a richer preview of a linked entity on hover or focus.

ANATOMY & USAGE

结构与使用建议

组成部分

触发链接
预览卡片
标题与元数据

适合使用

无需离开当前页面即可快速预览人物或资源时。

不建议使用

卡片包含复杂任务，或触屏上没有等价入口时。

键盘与无障碍

支持键盘聚焦与可移入内容；不遮挡触发器，Escape 关闭，触屏可通过点击访问。

DESCRIBE IT TO AI

这样告诉编程助手

实现悬浮信息卡（Hover Card）：悬停或聚焦链接时显示相关实体的丰富预览。

MINIMAL RUNNABLE CODE

可复制代码

原生与 React 两套实现，不依赖第三方组件库。

READ ONLY · SAFE TO COPY

<div class="demo hover-card-wrap">
  维护者：<a href="/people/lin" aria-expanded="false" aria-controls="profile">林晨</a>
  <aside id="profile" hidden>
    <strong>林晨</strong>
    <span>产品设计师</span>
    <a href="/people/lin">查看资料</a>
  </aside>
</div>