:hover 伪类可作用于任意元素但需兼顾兼容性与可访问性，background-color 需配合 background 简写覆盖图像，transition 应限定属性并写在基础样式中，优先级取决于选择器特异性而非伪类本身。
hover 伪类必须作用在可交互元素上
直接给 <div> 或 <span> 加 :hover 是能生效的，但部分旧版浏览器（如 IE6）只支持 a 标签的 :hover。现代项目中只要元素有 cursor: pointer 或明确语义（比如按钮），用户预期它可交互，就该加 tabindex="0" 保证键盘可聚焦 —— 否则仅靠鼠标悬停可能被屏幕阅读器忽略。
background-color 在 hover 中写法要完整
常见错误是漏掉单位或写错值类型，比如 background-color: #fff 缺少末尾分号、或写成 background-color: white 却没考虑透明度需求。更关键的是：如果原元素已有 background-image，单设 background-color 不会覆盖图像，得用 background 简写重置整个背景。
button {
background-color: #e0e0e0;
}
button:hover {
background-color: #4285f4; /* ✅ 正确：纯色替换 */
}
/* ❌ 错误示例（若原背景含图片） */
.card {
background-image: url("bg.png");
}
.card:hover {
background-color: rgba(0, 0, 0, 0.1); /* 这不会显示！图片仍在上层 */
}
/* ✅ 正确做法 */
.card:hover {
background: rgba(0, 0, 0, 0.1) url("bg.png"); /* 合并写法 */
}transition 让颜色变化不突兀
没有过渡效果的 :hover 背景变色会显得生硬，尤其深浅色切换时。注意两点：transition 必须写在非 hover 的基础样式里；只过渡 background-color 比过渡 background 更安全（后者会触发重绘，且可能意外过渡到 background-position 等）。
-
transition: background-color 0.2s ease;—— 推荐，精准控制 -
transition: all 0.2s;—— 避免，可能意外过渡其他属性（如border、box-shadow） - 如果用了
background简写，过渡会包含所有子属性，性能略差
伪类优先级与覆盖逻辑
:hover 本身没有特殊权重，它的样式是否生效，取决于选择器整体的特异性（specificity）。比如 .btn:hover 会被 #header .btn:hover 覆盖，但不会被 .btn 基础样式覆盖 —— 因为两者特异性相同，后声明者胜出。
立即学习“前端免费学习笔记（深入）”；
容易踩的坑：
- 在 CSS 文件底部写了
.item:hover { background-color: red; }，但前面某处有.item.active:hover { background-color: blue; }，结果 hover 时永远是蓝色 - 用
!important强行覆盖，导致后续维护困难 - 内联样式（
style="background-color: green;"）比任何伪类都高，:hover无法覆盖
过渡动画和特异性是实际项目中最常被忽略的两个点，尤其是多人协作时，hover 样式突然失效，八成是被更高优先级的选择器静默覆盖了。
