CSS悬停无效？hover伪类正确用法解析

.card {
  cursor: pointer;
  background-color: #f5f5f5;
}
.card:hover {
  background-color: #e0e0e0;
}

关键点：

• cursor: pointer 不仅改光标，还向浏览器表明该元素“有意图响应悬停”，提升兼容性
• 避免用过于宽泛的选择器（如 div:hover），优先用类名精确控制
• 如果元素内含 position: absolute 覆盖层，检查是否挡住了鼠标事件——可加 pointer-events: none 到遮罩层

伪类顺序影响 hover 是否可用

CSS 中 :link、:visited、:hover、:active 的书写顺序必须是 LVHA（LoVe HAte），否则 :hover 可能被前面的规则压制。即使你只写 :hover 和 :active，也要注意它们的相对位置：

a {
  color: blue;
}
a:hover {
  color: red;
}
a:active {
  color: orange;
}

如果把 a:active 写在 a:hover 前面，且两者修改同一属性，:hover 就可能失效——因为后声明的规则优先级更高（同权重下，后出现者胜）。

移动端 hover 的特殊处理

多数触摸设备没有真正意义上的「悬停」，iOS Safari 和 Android Chrome 在点击前会模拟一次 hover（称为「hover 透传」），但仅限于有 cursor: pointer 或监听了 click 事件的元素。纯靠 :hover 实现交互反馈，在手机上基本不可靠。

• 不要依赖 :hover 做关键功能提示（比如隐藏菜单只靠 hover 展开）
• 需要触控友好时，用 @media (hover: hover) and (pointer: fine) 区分精细指针设备
• 更稳妥的做法：用 JavaScript 监听 touchstart + mouseenter，统一触发类名切换

hover 不是失效，而是它本就只承诺「当用户意图悬停时尽可能响应」。真实项目里，别把它当开关用，而要当作增强体验的一层渐进式提示——能触发最好，不能也不该破坏基础功能。

以上就是《CSS悬停无效？hover伪类正确用法解析》的详细内容，更多关于的资料请关注golang学习网公众号！