禁用按钮仍触发:hover是因为:hover伪类不检测disabled状态，仅响应鼠标悬停；正确做法是用button.btn:disabled:hover显式重置样式，并同步处理:focus状态。
为什么禁用按钮还能触发:hover样式
因为 :hover 是纯 CSS 伪类，它只看鼠标是否悬停，不关心元素是否被 disabled。只要鼠标移上去，浏览器就渲染 .btn:hover 规则——哪怕按钮已加 disabled 属性、视觉灰化、点击无效，:hover 依然生效，导致背景色突变、边框抖动、甚至位移动画意外触发。
正确写法：用 :disabled 覆盖 hover 样式
Bootstrap 5 默认通过 button:disabled 选择器接管禁用态，但它的样式优先级通常低于 .btn:hover。必须显式覆盖：
- 在项目 CSS 中写
button.btn:disabled:hover { background-color: inherit; border-color: inherit; color: inherit; transform: none; } - 如果用了自定义 hover 位移（如
transform: translateY(-2px)），一定要在:disabled:hover里重置为transform: none - 别只写
.disabled:hover—— Bootstrap 5 已废弃该类的语义支持，:disabled才是唯一可靠锚点 - 对
<input type="button">，要写input[type="button"]:disabled:hover，不能混用选择器
容易被忽略的焦点残留问题
禁用按钮仍可能被键盘 Tab 到，触发 :focus 样式（比如蓝边阴影），这和 :hover 是独立逻辑。修复时需同步处理：
button.btn:disabled:focus { box-shadow: none; outline: none; }- 若用了
tabindex="-1"强制移除焦点，记得检查是否影响屏幕阅读器播报——禁用状态应靠aria-disabled="true"传达，而非仅靠 tabindex - 移动端 Safari 有时会保留 focus 状态直到用户点击其他区域，建议在 JS 启用禁用时主动调用
btn.blur()
别用 pointer-events: none 来“掩盖”hover
这是常见误操作：给禁用按钮加 style="pointer-events: none"，以为能一劳永逸屏蔽 hover。但它有硬伤：
-
pointer-events: none不影响:focus，Tab 过去照样高亮 - 它让整个按钮区域对鼠标“透明”，父容器事件委托可能捕获到穿透事件
- 某些安卓 WebView 下，
pointer-events: none对:hover的拦截不稳定，悬停动画仍会闪一下 - 真正该做的是切断样式链，而不是遮罩交互
最简路径就是老老实实写 :disabled:hover 和 :disabled:focus，并确保它们出现在你自己的 CSS 文件里，且选择器比 Bootstrap 原生规则更具体。否则，哪怕只漏掉 transform 重置，用户鼠标划过时按钮还是会“跳一下”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
