直接用 :hover 即可，但需确保选择器命中按钮、无更高优先级样式覆盖，且按钮为可交互元素；若用 div/span 模拟按钮，须加 cursor: pointer 和 tabindex="0" 以保障可访问性。
直接用 :hover 就行，但得确保选择器能命中按钮，且没有更高优先级的样式覆盖。
按钮必须是可交互元素才能触发 :hover
不是所有标签默认支持 常见原因是别的 CSS 规则优先级更高，比如内联样式、 单纯改 立即学习“前端免费学习笔记（深入）”； 另外，别用 悬停效果看似简单，但真正上线前得在真实设备上测：触摸屏没有 hover 状态，:hover 的视觉反馈——虽然浏览器普遍对 、、 等原生控件启用 :hover，但如果你用了 模拟按钮，就得手动加 cursor: pointer 和 tabindex="0"（否则键盘用户无法聚焦，部分屏幕阅读器也可能忽略）。
→ 可直接用 .my-btn:hover
.my-btn:hover { ... } + .my-btn { cursor: pointer; }
且没加 tabindex，:hover 虽然生效，但不符合可访问性要求:hover 样式被其他规则覆盖怎么办
!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 在 iOS Safari 上可能延迟触发或不触发；如果按钮同时要响应点击，别忘了补上 :active 样式，否则按下去没反馈。
