bootstrap按钮悬停变色不生效，主因是自定义css选择器权重不足；需用更具体选择器如.btn.btn-primary:hover或检查开发者工具确认样式是否被覆盖。
Bootstrap按钮悬停变色不生效？检查是否覆盖了默认CSS优先级
Bootstrap的 .btn 类自带 :hover 样式，但你写的自定义 :hover 规则很可能被忽略——不是语法错，是选择器权重不够。比如只写 .btn:hover { color: red; }，在 Bootstrap 5 中大概率无效，因为它的原生规则是 .btn-primary:hover 这类更具体的选择器。
- 用浏览器开发者工具检查元素，看你的
:hover样式是否被划掉（即被更高优先级规则覆盖） - 提升权重：改用
.btn.btn-primary:hover或加!important（仅调试时用，上线前应避免） - Bootstrap 4/5 默认禁用部分悬停效果（如
.btn-outline-*在聚焦/悬停时颜色变化很弱），需显式重写
想让下拉菜单（Dropdown）悬停展开？别直接给 .dropdown 加 :hover
Bootstrap 的 .dropdown 依赖 JavaScript 控制显示逻辑，单纯加 :hover .dropdown-menu { display: block; } 会和 JS 冲突：鼠标移开菜单立刻消失，或点击失效。这不是 CSS 能绕过的限制。
- 必须配合 JS 禁用默认点击触发，再用
:hover控制.dropdown-menu的display或opacity - 推荐做法：移除
data-bs-toggle="dropdown"，用纯 CSS 实现（仅适用于简单导航栏） - 注意移动端：悬停在触摸设备上无意义，务必保留点击回退逻辑，否则 iOS 用户点不开菜单
卡片（Card）悬停抬升+阴影，但动画卡顿？慎用 transform 和 box-shadow 同时过渡
常见写法 .card:hover { transform: translateY(-4px); box-shadow: 0 8px 16px rgba(0,0,0,0.1); transition: all .3s; 看似合理，但 box-shadow 是高成本属性，尤其在低配设备上易掉帧。
- 只对
transform和opacity做过渡：它们能触发硬件加速，box-shadow不行 - 正确写法：
transition: transform .3s, opacity .3s;，阴影用will-change: transform;提前提示渲染引擎 - Bootstrap 5 的
.card默认没有overflow: hidden，悬停抬升时若内容溢出，边缘会“破图”，记得补上
自定义表单控件（如 .form-check-input）悬停样式无效？伪元素没选对
Bootstrap 把复选框、单选按钮的视觉样式完全抽离到 ::before / ::after 伪元素上，直接写 .form-check-input:hover { background: blue; } 没用——原生 <input> 本身不可见。
- 必须作用于父容器：
.form-check-input:checked + .form-check-label::before是勾选态，悬停要写.form-check:hover .form-check-label::before - 注意层级：Bootstrap 5 使用
position: absolute绘制伪元素，确保父容器.form-check有position: relative - 不要用
!important强行覆盖background-image（如 SVG 图标），会导致悬停时图标闪烁或不更新
真正麻烦的从来不是写 :hover，而是判断该交由 CSS 控制，还是必须让 JS 接管。比如模态框（Modal）或轮播（Carousel）的悬停行为，硬塞 CSS 很容易破坏可访问性（键盘用户无法触发）。留个心眼：先看官方文档是否明确支持 hover 交互，再动手。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
