直接用 :hover 即可，但需确保选择器命中按钮、无更高优先级样式覆盖，且按钮为可交互元素；若用 div/span 模拟按钮，须加 cursor: pointer 和 tabindex=”0″ 以保障可访问性。
直接用 :hover 就行，但得确保选择器能命中按钮，且没有更高优先级的样式覆盖。
按钮必须是可交互元素才能触发 :hover
不是所有标签默认支持 :hover 的视觉反馈——虽然浏览器普遍对 、、 等原生控件启用 :hover，但如果你用了
或
cursor: pointer 和 tabindex="0"（否则键盘用户无法聚焦，部分屏幕阅读器也可能忽略）。
-
→ 可直接用.my-btn:hover -
.my-btn:hover { ... }+.my-btn { cursor: pointer; } - 纯 css 按钮若写成
且没加tabindex，:hover虽然生效，但不符合可访问性要求
:hover 样式被其他规则覆盖怎么办
常见原因是别的 CSS 规则优先级更高，比如内联样式、!important、或更具体的选择器（如 button.my-btn:hover vs .my-btn:hover）。检查开发者工具里该按钮的 :hover 是否被划掉。
- 优先级不够时，可提升选择器特异性：用
button.my-btn:hover替代.my-btn:hover - 避免滥用
!important，它会让后续维护变困难 - 如果按钮有
disabled状态，注意button:disabled:hover不会触发——浏览器会忽略对禁用状态的:hover
颜色变化要兼顾可访问性与性能
单纯改 color 或 background-color 很容易，但要注意两点：一是悬停前后文字/背景对比度是否仍 ≥ 4.5:1（WCAG AA 标准），二是避免只靠颜色变化传达状态（比如红→绿），应叠加图标、下划线或字体粗细等辅助信号。
立即学习“前端免费学习笔记（深入）”；
另外，别用 transition: all .3s 这种写法——它可能意外触发动画重绘（比如改了 box-shadow 却导致整个层重绘）。推荐明确指定属性：
.my-btn { background-color: #007bff; color: white; transition: background-color 0.2s ease, color 0.2s ease; } .my-btn:hover { background-color: #0056b3; color: #f8f9fa; }悬停效果看似简单，但真正上线前得在真实设备上测：触摸屏没有 hover 状态，:hover 在 ios safari 上可能延迟触发或不触发；如果按钮同时要响应点击，别忘了补上 :active 样式，否则按下去没反馈。