: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 效果看起来“断断续续”。

使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审

使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。

下载

• 解决方法：给元素加 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

实际效果是否平滑，往往卡在 display 类型、transition 属性粒度、以及是否忘了移动端 fallback —— 这三处调不好，再漂亮的配色也白搭。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！