a:hover 是唯一零 js、语义正确且无障碍友好的链接悬停实现方式，它原生支持键盘焦点、屏幕阅读器及触摸设备模拟悬停，而 javascript 事件如 onmouseover 或 mouseenter 会破坏可访问性且不兼容无鼠标环境。
a:hover 是唯一可靠、零 JS、语义正确且无障碍友好的链接悬停实现方式。其他方法（如 onmouseover、addEventListener("mouseenter")）要么破坏可访问性，要么增加不必要的复杂度，只在极少数需要动态逻辑的场景下才考虑。
为什么必须用 a:hover 而不是 JavaScript 绑定事件
浏览器对 a:hover 的支持是原生且稳定的，它自动适配键盘 Tab + Enter、屏幕阅读器焦点状态，以及触摸设备的“模拟悬停”行为（如 iOS Safari 的首次点击触发 :hover）。而 onmouseover 在无鼠标设备上完全失效，mouseenter 无法响应键盘焦点，强行补全会显著增加代码体积和维护成本。
常见错误现象包括：键盘用户无法看到悬停样式、移动端首次点击无反馈、屏幕阅读器播报时样式错乱。
- 所有现代浏览器（含 IE9+）都支持
a:hover，无需 polyfill - 不要给
@#@#@#@#@#@#@#@#@#@0 - CSS 中必须包含：
a { position: relative; } a::after { content: url(attr(data-preview)); position: absolute; top: 100%; left: 0; width: 200px; height: 150px; opacity: 0; transition: opacity 0.2s; } a:hover::after { opacity: 1; } - 跨域图必须走后端代理或改用 JS +
fetch+ObjectURL，否则无法绕过限制
最易被忽略的是移动端兼容性 —— 没有持续的 hover 状态，所有依赖 :hover 的交互在触摸设备上只在点击瞬间生效。如果业务强依赖悬停反馈（如工具提示、预览图），必须提供点击展开的 fallback，且不能仅靠 :active 模拟。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
