表格行hover高亮不生效，需检查是否被Bootstrap默认样式覆盖、!important冲突或overflow:hidden限制；应优先使用.table-hover类，自定义颜色时覆盖其hover规则，避免td背景色遮盖tr hover效果。
表格行 hover 高亮不生效？检查是否覆盖了 Bootstrap 的默认样式
Bootstrap（尤其是 v5+）对 .table 行的 :hover 有默认定义，但如果你自定义了 tr 或 td 的背景色、用了 !important、或父容器设置了 overflow: hidden，hover 效果就可能被压制。最常见的是在 .table-striped 表格中，偶数行（.table-striped > tbody > tr:nth-of-type(odd)）的背景色会干扰你的 hover 样式。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 优先用 Bootstrap 自带的
.table-hover类 —— 它已为tbody > tr:hover设好浅蓝背景，兼容性好且无需额外 CSS - 若需自定义颜色，直接覆盖其 hover 规则，而不是新建
tr:hover：.table-hover > tbody > tr:hover { background-color: #e9f7fe !important; } - 避免对
td单独设background-color，它会盖住tr的 hover 背景；如必须设置，请确保td的背景是transparent或继承tr
点击后保持高亮（active 状态）需要 JavaScript 配合
CSS 的 :active 仅在鼠标按下瞬间触发，松开即失效，无法实现“点击后持续高亮”。要让某行保持选中态，必须用 JS 切换 class（比如 active），再配合 CSS 渲染。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 给表格加
data-bs-toggle="table-row-active"这类语义化属性（非必需，便于维护），然后监听click事件： - 每次点击先清除所有
.active，再给当前tr添加：
document.querySelectorAll('.table tbody tr').forEach(row => { row.addEventListener('click', function() { document.querySelectorAll('.table tbody tr.active').forEach(r => r.classList.remove('active')); this.classList.add('active'); }); }); - 对应 CSS 必须显式定义
.active背景色，且权重不低于 Bootstrap 默认：
.table > tbody > tr.active, .table > tbody > tr.active > td, .table > tbody > tr.active > th { background-color: #d0e7ff !important; }
移动端点击无反馈？补上 :active 并处理触摸延迟
移动端 Safari 和部分安卓浏览器对 :active 支持弱，且存在 300ms 点击延迟，导致点击瞬间没视觉反馈。纯 CSS 的 :active 几乎不可靠，尤其当目标是 tr（非可点击元素）时。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 不要依赖
tr:active做点击反馈，它只在极短时间生效，用户几乎感知不到 - 如果坚持用 CSS 模拟“按压感”，可加过渡 + 伪类，但仅作辅助：
.table > tbody > tr { transition: background-color 0.15s ease; } .table > tbody > tr:active { background-color: #cce5ff !important; } - 更稳妥的做法是：JS 在
touchstart时加临时类（如is-pressing），touchend后移除，并在 CSS 中定义该类样式
多选行高亮时，避免 active 类与 hover 冲突
当支持多选（如按 Ctrl 点击多行）时，若同时启用 .table-hover 和自定义 .active，悬停未选中行会覆盖已选中行的背景色，造成视觉混乱。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 让
.active的 CSS 权重高于:hover，例如用.table tbody tr.active:hover强制保留选中态背景 - 或者禁用 hover（移除
.table-hover），改用 JS 控制悬停态：
row.addEventListener('mouseenter', () => { if (!row.classList.contains('active')) row.classList.add('hovering'); }); - 关键点：CSS 中
.active必须写在:hover规则之后，否则会被覆盖
.table-hover + JS 控制 .active，并始终用浏览器开发者工具实时检查 computed styles，看哪条规则实际生效。 
