Bootstrap按钮:hover样式被覆盖需提升选择器权重，如用.btn.btn-primary.custom-hover:hover；transition须写在常态规则中；:hover:active需协调实现连贯按压反馈；暗色模式下须用@media手动适配悬停色。
Bootstrap按钮:hover样式被覆盖怎么办
Bootstrap默认的按钮悬停效果（比如.btn-primary:hover）会直接修改background-color和border-color，但如果你在自定义CSS里用:hover重写，很可能不生效——因为Bootstrap的CSS选择器权重更高（例如.btn.btn-primary:hover比单纯.my-btn:hover更具体）。
解决办法只有两个：要么提升你自己的选择器权重，要么用!important（不推荐），更稳妥的是复刻Bootstrap的类名结构：
.btn.btn-primary.custom-hover:hover {
background-color: #0056b3;
border-color: #004085;
transform: translateY(-1px);
}
- 必须同时带上
.btn和.btn-primary，否则权重不够 - 避免用ID或
!important，否则后续维护困难 - 如果用Sass，直接在
$theme-colors后覆盖变量更干净
transition动画加在哪一层才平滑
只给:hover加transition是错的。过渡效果必须写在**常态规则**（非hover）上，浏览器才能在进入/离开时都触发动画。写在:hover里只会让鼠标移入有动画、移出瞬间跳变。
正确写法：
立即学习“前端免费学习笔记（深入）”；
.btn.custom-transition {
transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}
.btn.custom-transition:hover {
background-color: #004085;
border-color: #003366;
transform: translateY(-2px);
}
- 不要只写
transition: all .2s，会导致阴影、字体粗细等意外属性也动起来 - 多个属性过渡时间不一致时（比如
transform想更快），必须显式列出并分别设时长 - 移动端Safari对
transform过渡支持更好，优先用它替代top/margin-top
点击态（:active）和悬停态冲突怎么处理
鼠标按下按钮瞬间，:active和:hover会同时存在，但:active的样式常被忽略，导致“按下去没反馈”。这是因为Bootstrap的:active规则里用了transform: none强行重置了:hover的位移。
要保留悬停抬升+点击下压的连贯感，得手动协调：
.btn.custom-press:hover {
transform: translateY(-2px);
}
.btn.custom-press:hover:active {
transform: translateY(0);
box-shadow: inset 0 1px 3px rgba(0,0,0,.15);
}
-
:hover:active选择器确保只在悬停状态下按下才触发 - 避免单独写
:active，否则脱离悬停时点击也会触发（不符合用户直觉） - 加
box-shadow: inset比改背景色更能模拟物理按压感
暗色模式下:hover颜色对比度不足
Bootstrap 5.3+ 支持@media (prefers-color-scheme: dark)，但它的.btn-*:hover没适配暗色背景，容易导致文字看不清。比如.btn-light:hover在暗色模式下还是变深灰，文字就糊了。
必须手动补全暗色逻辑：
@media (prefers-color-scheme: dark) {
.btn.btn-primary:hover {
background-color: #0a580a;
border-color: #084208;
}
.btn.btn-outline-primary:hover {
color: #198754;
background-color: rgba(25, 135, 84, 0.1);
}
}
- 别依赖
color-modeJS插件，原生媒体查询更轻量、更可靠 - 检查WCAG对比度：暗色下文本与背景比至少4.5:1，可用
chrome://accessibility验证 - 如果项目用CSS变量，把悬停色也抽成
--bs-btn-hover-bg这类变量，统一管理
:hover:active的组合状态和暗色模式回退——这两处不处理，按钮交互就会显得“卡顿”或“失敏”，而不是单纯“不好看”。 
