:hover伪类必须配合具体选择器使用，单独书写无效；需确保元素有可渲染背景、合理display类型及transition属性，并避免在移动端依赖hover。
hover 伪类必须配合具体选择器使用
单独写 :hover 没有效果，它只是状态描述符，必须绑定到某个元素上。常见写法是 a:hover、div:hover 或带 class 的 .btn:hover。
如果你写了 :hover { background-color: #eee; } 却没反应，大概率是因为缺少前置选择器。
- 正确：
.card:hover { background-color: #f5f5f5; } - 错误：
:hover { background-color: #f5f5f5; }（浏览器忽略） - 注意：
input、button等表单元素默认支持:hover，但span、p需要确保有可交互的触发条件（比如加了cursor: pointer或本身是链接）
background-color 变化需要元素有“可渲染背景”
纯文本元素如 span 默认 display: inline，不占块级空间，即使写了 background-color 也可能只包住文字，hover 效果看起来“断断续续”。
- 解决方法：给元素加
display: inline-block或display: block - 或者用
padding扩展点击热区，让 hover 更易触发 - 避免对空
div直接设height: 0后再 hover——它没有高度，鼠标根本悬停不到
transition 让颜色变化更自然
直接改 background-color 是瞬时切换，加 transition 才有淡入/滑动感。但要注意属性名和时长匹配。
立即学习“前端免费学习笔记（深入）”；
- 推荐写法：
transition: background-color 0.2s ease; - 别写成
transition: all 0.2s;——可能意外带动其他属性（比如 border、transform），引发重排或闪烁 - 如果背景色是从透明变色，记得初始状态也显式声明
background-color: transparent，否则过渡会从“无定义值”开始，行为不可控
移动端 hover 不可靠，需兼容 tap
iOS Safari 和部分安卓浏览器中，:hover 只在模拟鼠标（比如外接触控板）时生效；真机触摸通常只触发一次，且延迟高、体验差。
- 关键点：不要依赖
:hover实现核心功能（比如菜单展开、关键提示） - 替代方案：用 JavaScript 监听
touchstart+touchend切换 class，再用该 class 控制背景色 - 快速检测：可在 CSS 中加
@media (hover: hover) and (pointer: fine) { .btn:hover { ... } }，仅对精确指针设备启用 hover
