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;
}
button:hover {
background-color: #0056b3;
transform: translateY(-1px);
}
button:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}

移动端和键盘用户的注意事项

纯 :hover 在触屏设备上行为不可靠，且对键盘导航用户不友好。如果按钮需要被 TAB 键聚焦，务必补充 :focus 样式；必要时还可叠加 :focus-visible 实现“仅键盘触发”的高亮。

• 不要依赖 :hover 显示关键信息（比如工具提示），那部分应默认可见或用 JS 控制
• 避免在 :hover 中改变布局尺寸（如 margin、padding），容易引发重排，尤其在低端 Android 设备上抖动明显
• 如果项目需兼容 IE10+，注意 transform 和 transition 需加 -ms- 前缀（但如今基本可忽略）

实际中最容易被忽略的是：悬停效果是否在键盘焦点下依然可用，以及过渡是否真的只作用于能动画的属性。这两个点一旦漏掉，轻则体验割裂，重则在某些设备上完全失效。