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 - 不要给
<a>加role="button"或tabindex来“修复” JS 悬停 —— 这反而会破坏默认语义 - 若需兼容老 IE（如 IE6），只能用
a:hover配合 CSS 表达式（不推荐）或降级为纯色变化
a:hover 必须搭配 transition 才算可用
直接写 a:hover { color: red; } 会导致样式突变，视觉生硬且不符合 WCAG 2.1 动画标准。过渡必须声明具体属性，避免用 all 引发重排重绘。
立即学习“前端免费学习笔记（深入）”；
性能影响明显：未加 transition 的 a:hover 在低端安卓机上可能卡顿；滥用 transition: all 0.3s 会让 font-size、height 等触发 layout，拖慢渲染。
- 推荐写法：
transition: color 0.2s ease, text-decoration-color 0.2s ease; - 慎用
transform缩放：若父容器有overflow: hidden，scale(1.05)可能导致边缘裁切 - 禁用
box-shadow过渡：它常触发 paint，移动端掉帧严重；改用opacity或background-color更稳妥
多元素联动高亮必须用 JavaScript，CSS 兄弟选择器不实用
CSS 的 .link-a:hover ~ .link-a 看似能联动，但实际受限极多：要求所有目标元素必须是同一父级下的后续兄弟节点，且不能跨 <div>、<section> 等容器。真实页面结构几乎不可能满足。
典型失败场景：导航栏中的主链接与页脚同名链接、卡片列表中分散的“查看详情”按钮、侧边栏与正文内嵌的相同 href 链接。
- JS 方案只需比对
event.target.href与页面内所有a的href，再统一加类（如highlighted） - 务必监听
mouseleave而非mouseout，避免子元素移出触发误清除 - 加节流（
setTimeout延迟 50ms）防止快速划过时样式闪烁
悬停预览图只能用 data- + ::after，title 完全无效
title 属性只渲染纯文本，浏览器会转义 HTML 标签，写 title="<img src="https://img.php.cn/" alt="HTML怎么做链接悬停效果_html链接hover多种动画效果【常见问题】">" 会原样显示字符串。真正能渲染图片的只有 CSS 伪元素 + content: url()，但它有硬性限制。
容易踩的坑：图片跨域时控制台报 CORS 错误且空白；未设 position: relative 导致预览图定位飘移；未限定 ::after 宽高造成布局抖动。
- HTML 中写：
<a href="/page" data-preview="/img/preview.jpg">Link</a> - 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 模拟。
