:hover不生效需先检查三件事：元素是否具备可悬停尺寸、是否被display:none或visibility:hidden禁用、移动端是否缺乏首次点击激活；transition须写在常态规则中且属性需两端定义；语义化元素表现差异及复杂交互需JS补位。
hover 伪类不生效？先检查这三件事
绝大多数
失效不是写法错，而是被更基础的条件卡住了。
元素必须是「可交互」或「被浏览器视为可悬停」的——
:hover
、
position: absolute
且父级没设
height
），那鼠标其实没真正“悬停”到它身上
:hover
不作用于
display: none
元素，也不作用于
visibility: hidden
的后代（但作用于
visibility: hidden
自身）
移动端 Safari 和部分安卓 WebView 默认不触发
:hover
，除非用户真点过一次屏幕（iOS 会模拟一次“激活”），所以纯靠
:hover
做关键功能会有体验断层
CSS 中 hover 配合 transition 的典型写法陷阱
想让悬停有淡入/滑动效果，很多人直接给
:hover
加
transition
，结果动画只在进入时有、离开时消失得突兀。
transition
必须写在「常态规则」里，不是只写在
:hover
里——否则离开时没有过渡
要过渡的属性必须在常态和
:hover
状态下都存在（比如常态设
opacity: 1
，
:hover
设
opacity: 0.6
；如果常态没写
opacity
，那它默认是
1
，但部分浏览器可能不触发过渡）
慎用
transition: all
——它会让所有可动画属性都参与过渡，包括你没意识到的
box-shadow
、
transform
，导致意外卡顿或闪烁
推荐写法：
button { opacity: 1; transition: opacity 0.2s ease, transform 0.2s ease; }
button:hover { opacity: 0.8; transform: translateY(-2px); }
hover 在按钮、链接、卡片上的常见适配差异
不同语义化元素对
:hover
的响应逻辑一致，但实际表现受默认样式和可访问性约束影响很大。
使用HTML,CSS,JavaScript开发Android应用程序 英文文字pdf版附源文件
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
下载
立即学习
“
前端免费学习笔记（深入）
”；
标签天然支持
:hover
，但若加了
pointer-events: none
（比如为了禁用点击），
:hover
也会失效
user-select: none
，可能影响
:hover
响应灵敏度（尤其快速进出时）
卡片类容器（如
role="region"
的
）建议加
cursor: pointer
，否则用户无法直观感知可悬停——这不是规范要求，但关乎真实可用性
需要 JavaScript 补位的 hover 场景
纯 CSS
:hover
解决不了延迟响应、条件判断、或跨元素联动（比如悬停 A 时高亮 B）。
移动端需模拟 hover 效果时，别用
ontouchstart
直接切状态——会导致点击穿透或连点误判；推荐用
touchend
后加
setTimeout
延迟移除，或监听
pointerdown
/
pointerup
要实现「悬停 300ms 后才触发动画」，CSS 没有原生 delay-on-hover，必须用 JS 监听
mouseenter
启动计时器，
mouseleave
清除
当父容器用了
overflow: hidden
且子元素悬停后伸展超出边界，CSS 无法自动扩大父容器——这时得 JS 测量并临时改
height
或切 class
复杂交互里，hover 往往只是触发信号，真正干活的还是 JS。别硬扛，该交出去就交出去。