根本原因是Bootstrap默认规则权重更高、加载顺序错误或移动端不触发hover：需用.btn.btn-primary:hover等复合选择器，确保自定义CSS在Bootstrap后加载，并为触控设备用:active或JS模拟is-hovered类。
根本原因不是你写错了 :hover，而是 Bootstrap 的默认规则权重更高、加载顺序不对，或者浏览器根本不触发 hover 状态——尤其在移动端。
选择器权重不够，样式被覆盖
Bootstrap 用的是 .btn.btn-primary:hover 这类复合选择器，而你只写了 .btn:hover 或 .my-btn:hover，浏览器按 CSS 特异性规则直接忽略你的声明。
- 检查开发者工具的「Computed」面板，看
background-color或transform是否被划掉，被哪条规则覆盖 - 必须复制 Bootstrap 原始结构：改主按钮就写
.btn.btn-primary:hover，改 outline 就写.btn.btn-outline-secondary:hover - 别依赖
!important硬顶——它会在暗色模式、响应式断点里引发连锁冲突
CSS 加载顺序错误
自定义样式表必须放在 Bootstrap CSS 之后引入，否则你的 :hover 规则永远排在默认规则前面，压根没机会生效。
- 确认
<link>标签顺序：bootstrap.min.css在前，你的custom.css在后 - 如果用 Sass，确保自定义 SCSS 文件在
@import "bootstrap"之后编译 - Webpack/Vite 等构建工具中，检查 CSS import 顺序或 extract 插件配置
移动端根本不会持续触发 :hover
iOS Safari 和多数安卓浏览器不支持真正的 hover 状态——点击瞬间触发，松手立即消失。这不是 bug，是规范行为。
-
:hover在触屏设备上不可靠，纯 CSS 无法解决“悬停保持”需求 - 简单 fallback：加
.btn:active { transform: translateY(0); }模拟按下归位 - 要一致体验：用 JS 监听
touchstart/touchend切换is-hovered类，再配 CSS 规则 - 别混用
:hover和:active同时做缩放+位移，否则触屏用户点一下就卡在抬升态
按钮内容为空导致视觉失效
动态创建的按钮即使加了 .btn.btn-primary 类，若没插入文本或子元素，内边距、高度、行高等样式会塌陷，看起来像“没生效”。
- 检查 DOM 元素是否真的包含文字或图标：
<button class="btn btn-primary">Submit</button> - 空按钮
<button class="btn btn-primary"></button>不会显示预期尺寸和背景 - JS 动态生成时，务必调用
textContent或innerHTML补充内容，不能只设 class
真正难搞的不是写错一行 CSS，而是不同设备、不同加载时机、不同 DOM 创建方式下，hover 表现完全不一致——得逐层验证权重、顺序、内容、设备能力，缺一不可。
