鼠标一放就弹个预览：目录站的卡片 hover 预览该怎么做，手机上拿什么替代
鼠
很多目录站喜欢在列表卡片上做悬浮预览：鼠标停在卡片上，弹出一个小窗，里面是对方站点的截图、简介或者一个缩略的 iframe。想法很实际——用户不用真的跳走，就能先判断要不要点。
这个交互在桌面上确实好用，但它有三个前提：设备有指针、指针能悬停、用户会去悬停。这三条在手机上一条都不成立。
图片来源：网络，版权归原作者所有，侵权请联系删除
先确认设备到底支不支持悬停
最常见的错法是用屏幕宽度判断。宽度小于 768 就当成手机，殊不知很多平板、二合一设备既有触屏又有鼠标，而部分桌面窗口被拉窄之后也会被误判。
正确的做法是直接问设备支持什么，用媒体特性：
@media (hover: hover) and (pointer: fine) {
.card:hover .preview { display: block; }
}hover: hover 表示主输入设备支持悬停，pointer: fine 表示指针精度高（鼠标、触控笔）。触屏设备是 hover: none 加 pointer: coarse。这一句就把桌面和手机分开了，跟视口宽度无关。
注意别只写 :hover 不做特性检测。触屏浏览器为了兼容老站点，经常会在「点一下」的时候临时触发一次 hover 状态，导致用户第一次点击弹出的是预览而不是跳转，要再点一次才进得去。这种「点两下才有效」的问题在移动端很常见，根源就在这里。
三种预览形态，代价差很多
| 形态 | 数据从哪来 | 主要代价 |
|---|---|---|
| 纯 CSS tooltip | HTML 里已有的文字，只是默认隐藏 | 几乎零成本，但只能展示已有内容 |
| 接口取摘要 | 鼠标悬停后发一次请求 | 请求量不可控，需要防抖 |
| 悬浮 iframe | 直接加载对方站点 | 最重，可能被对方 X-Frame-Options 挡掉 |
第一种最省心。目录站的卡片本来就有简介字段，把它默认折叠、悬停时展开即可，不产生任何网络请求，搜索引擎也能读到——因为它本来就在 HTML 里。
第二种要谨慎。鼠标从列表顶部划到底部，一秒钟能扫过十几张卡片，如果每张都发请求，服务端压力凭空涨一个量级。至少要加两道闸：延迟触发（悬停 300 毫秒以上才发）和取消机制（鼠标移开时把还没回来的请求 abort 掉）。
let timer = null, ctrl = null;
card.addEventListener('mouseenter', () => {
timer = setTimeout(async () => {
ctrl = new AbortController();
const r = await fetch(`/api/summary?id=${id}`, { signal: ctrl.signal });
show(await r.json());
}, 300);
});
card.addEventListener('mouseleave', () => {
clearTimeout(timer);
if (ctrl) ctrl.abort();
});第三种 iframe 预览我建议能不做就不做。除了性能，还有两个硬问题：一是大量站点会下发 X-Frame-Options 或 CSP 的 frame-ancestors 拒绝被嵌入，你的预览窗会有一半是白的；二是加载第三方页面意味着把对方的流量和脚本带进了自己的页面环境。真要做，务必把 sandbox 权限、尺寸写死、懒加载这几件事一次做齐，别只写个 src 就上线。
手机上拿什么替代
触屏没有悬停，但用户一样有「先看看再决定」的需求。可用的替代有四种，按实现成本从低到高：
- 直接把关键信息铺开。卡片上多带一行：一句话简介加三个标签。移动端本来就该这么做，不需要任何交互。
- 展开箭头。卡片右侧一个可点的折叠按钮，点开就地展开摘要。这是最贴近 hover 语义的替代，而且键盘也能用，记得给按钮加
aria-expanded。 - 长按预览。移动端原生的长按手势，但会和系统的复制、分享菜单打架，实现起来最别扭，一般不建议。
- 中间页。点一下先进一个轻量摘要页，再点才跳走。这其实已经不是预览了，但对外站质量参差不齐的目录站来说，中间页反而更实用——它给了你一个展示免责说明和更新时间的位置。
我的建议是前两种组合：移动端默认多显示一行信息，需要更多时点箭头展开。这个方案不需要额外接口，也不依赖任何设备特性。
爬虫看到的是哪一份
这是做预览时最容易忽略的一点：通过悬停或点击才出现的内容，爬虫大概率看不到。谷歌的文档说得很清楚，搜索爬虫不会与页面交互，不会悬停、不会滚动、不会点击。
所以如果预览里的那句话是你认为有价值的内容，它必须同时存在于服务端返回的 HTML 里，或者有一个能直接访问到的落地页承载它。只存在于 JS 变量里的摘要，对收录没有任何贡献。
这里有个简单的自查办法：把 JS 整个禁掉再打开列表页，看看还剩多少内容。剩下的那部分，才是搜索引擎稳定能拿到的。
无障碍这条也顺手补了
纯 hover 的交互对键盘用户是彻底关闭的——他们没法「悬停」。给卡片上的链接本身加 :focus-visible 样式，让键盘 Tab 到卡片时同样展开预览，成本只有一行 CSS。另外给预览容器加 role="tooltip" 和 aria-describedby，屏幕阅读器才会读出来。
悬浮预览是个小功能，但它恰好踩在设备能力、请求量、收录、无障碍四条线上。做完这四件事，它才是个完整的功能，而不是一个只在自己电脑上好用的演示。