button:hover没反应，主要因元素不可交互、样式被覆盖或仅在指针设备下触发；transition需指定可动画属性并确保起止值明确；移动端和键盘用户需补充:focus等状态。
button:hover 为什么没反应？检查这三点
按钮悬停效果失效，大概率不是 :hover 写错了，而是被其他样式覆盖、触发条件不满足，或元素本身不可交互。
-
button元素必须处于可交互状态（比如没加disabled属性，也没被pointer-events: none禁用） - 确保选择器权重足够——例如
.btn:hover被button { background: red; }的声明覆盖时，:hover里的背景色不会生效 -
:hover只在支持指针设备的环境中稳定触发（移动端 Safari 需点击后才激活一次，部分安卓浏览器表现不一致）
transition 要生效，必须指定「可动画属性」和「起始/结束值」
只写 transition: all .3s; 很危险：它会尝试过渡所有变化，但很多 CSS 属性（如 display、height 从 0 到 auto）根本不能平滑动画，反而导致卡顿或无效。
- 推荐显式声明要过渡的属性，例如：
transition: background-color .2s ease, transform .2s ease; - 确保悬停前后该属性有明确数值变化，比如
background-color: #007bff;→background-color: #0056b3;，而不是background-color: currentColor;这类无法计算中间态的值 - 避免对
width/height做过渡，除非你确定它们是固定像素值；用transform: scale()或opacity更安全
一个稳妥的按钮悬停示例（含 fallback）
下面这段代码在绝大多数现代浏览器中都能稳定工作，同时兼顾可访问性（保留焦点态）：
button {
background-color: #007bff;
color: white;
border: none;
padding: 8px 16px;
border-radius: 4px;
cursor: pointer;
/* 关键：只过渡明确支持的属性 */
transition: background-color 0.2s ease, transform 0.15s ease;
}
<p>button:hover {
background-color: #0056b3;
transform: translateY(-1px);
}</p><p>button:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}移动端和键盘用户的注意事项
纯 :hover 在触屏设备上行为不可靠，且对键盘导航用户不友好。如果按钮需要被 TAB 键聚焦，务必补充 :focus 样式；必要时还可叠加 :focus-visible 实现“仅键盘触发”的高亮。
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
:hover显示关键信息（比如工具提示），那部分应默认可见或用 JS 控制 - 避免在
:hover中改变布局尺寸（如margin、padding），容易引发重排，尤其在低端 Android 设备上抖动明显 - 如果项目需兼容 IE10+，注意
transform和transition需加-ms-前缀（但如今基本可忽略）
实际中最容易被忽略的是：悬停效果是否在键盘焦点下依然可用，以及过渡是否真的只作用于能动画的属性。这两个点一旦漏掉，轻则体验割裂，重则在某些设备上完全失效。
