CSS :hover 选择器可纯CSS实现悬停效果，需正确书写位置、搭配transition（写在常态规则中）、避免内联样式干扰，并优先使用语义化元素如button。
用 CSS :hover 选择器最直接
不需要 JavaScript，纯 CSS 就能搞定。关键在于给目标元素（比如链接、按钮或 div）写一条带 :hover 的规则，并设置 color、background-color 或其他可变属性。
常见错误是把 :hover 写在错误的位置——它必须紧跟在被悬停的元素选择器后面，不能单独存在，也不能套在其他伪类里（比如 a:link:hover 是错的，应写成 a:hover）。
- 对文字变色：
a:hover { color: #ff6b35; } - 对背景变色：
button:hover { background-color: #4ecdc4; } - 同时改文字和背景：
.nav-item:hover { color: white; background-color: #2a9d8f; } - 加过渡更顺滑：
a:hover { color: #e74c3c; transition: color 0.2s ease; }（否则变色会突兀）
transition 不加容易显得“卡”
浏览器默认切换颜色是瞬时的，人眼会感觉生硬。加上 transition 才有渐变效果。但要注意：它得写在「常态」规则里，不是只写在 :hover 中。
典型误区是只在 hover 里写 transition，这样鼠标移入有动画，移出却立刻跳回——因为常态下没声明过渡行为。
立即学习“前端免费学习笔记（深入）”；
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
- ✅ 正确写法：
a { color: #3498db; transition: color 0.3s; } a:hover { color: #e74c3c; } - ❌ 错误写法：
a { color: #3498db; } a:hover { color: #e74c3c; transition: color 0.3s; }（移出无过渡） - 如果要控制多个属性，可以写
transition: color 0.3s, background-color 0.3s;
内联样式无法被 :hover 覆盖
如果你在 HTML 标签里用了 style="color: red;"，那么 CSS 文件里的 a:hover { color: blue; } 默认不会生效——内联样式的优先级高于外部样式表中的伪类。
解决方法只有两个：删掉内联 style，或者用 !important 强制覆盖（不推荐，会增加维护难度）。
- 避免写：
<a href="#" style="color: #2c3e50;">首页</a> - 推荐写：
<a href="#" class="nav-link">首页</a>，然后在 CSS 里统一控制.nav-link和.nav-link:hover - 移动端注意：iOS Safari 对
:hover支持有限，首次点击后才触发，所以别依赖它做核心交互
用 <button> 比用 <div> 更稳妥
虽然 div:hover 在桌面端也能工作，但它不是语义化元素，缺乏可访问性支持（比如屏幕阅读器可能忽略），键盘用户也无法用 Tab 键聚焦并触发 hover 效果。
如果这个悬停区域本质是可点击的操作入口，优先用 <button> 或带 role="button" 的元素，再配合 CSS。
- ✅ 推荐：
<button class="action-btn">提交</button>+.action-btn:hover { background: #27ae60; } - ⚠️ 慎用：
<div class="card" onclick="..."></div>+.card:hover（对键盘和读屏用户不友好） - 若必须用
div，至少加上tabindex="0"和role="button"，并监听keydown回车/空格事件
transition 的位置和内联样式的干扰，这两处一错，效果就“看起来没反应”。 
