table:hover 无效是因为鼠标实际悬停在tr或td上，且空表格或collapse边框下hover区域缺失；应改用tr:hover并设置tr:hover td, tr:hover th背景色，注意覆盖td自身背景、优先级及移动端兼容性。
table:hover 为什么没反应？
直接给 <table> 写 <code>:hover 样式通常无效，因为表格本身没有“内容区域”可悬停——鼠标实际落在 <tr> 或 <code><td> 上。浏览器对空表格或纯边框表格的 hover 区域判断很保守，尤其当单元格没内容、没 padding、border-collapse 为 <code>collapse 时，hover 可能完全不触发。
实操建议：
- 优先对
<tr> 应用 <code>:hover，这是最稳定、语义最合理的做法 - 确保
<tr> 子元素（如 <code><td>）有明确尺寸：设置 <code>padding或最小min-width，避免“悬停热区”过小 - 若必须作用于整个表格，给
<table> 加 <code>display: block和显式width/height，但会破坏表格布局语义，不推荐tr:hover 背景变色失效的常见原因
写了
tr:hover { background-color: #f0f8ff; }却没效果，大概率是被单元格自身的background-color覆盖了。表格渲染中，<td> 的背景默认会遮挡 <code><tr> 的背景。 <p>解决方法：</p> <ul><li>把背景色设在 <code><td> 和 <code><th> 上，用属性选择器统一控制：<code>tr:hover td, tr:hover th { background-color: #f0f8ff; } - 避免在
<td> 上写死 <code>background-color，改用透明或 inherit - 注意 CSS 优先级：如果内联样式或更高权重选择器（如
table.my-table tr td）已定义背景，hover 规则需同等或更高权重才能覆盖 - 移动端 Safari 和 Android Chrome 对
:hover支持有限：触摸设备通常只在点击后短暂触发，且不会持续高亮 —— 不要依赖 hover 实现关键功能（比如隐藏/显示操作按钮） - 大量行数的表格（>1000 行）上频繁触发
:hover可能引起重绘卡顿，尤其配合渐变、阴影等昂贵样式。建议用will-change: background-color提前提示渲染引擎，或改用 class 切换（JavaScript 监听mouseenter/mouseleave）来减少样式计算压力 -
border-collapse: collapse下，tr:hover无法让边框“整体加粗”，因为边框属于单元格；如需此效果，得用box-shadow模拟
兼容性与性能注意点
:hover 在现代浏览器中支持良好，但有两个现实约束：
带过渡动画的 hover 效果怎么写？
纯颜色变化加 transition 很简单，但要注意过渡属性必须精确匹配被修改的 CSS 属性：
tr:hover td, tr:hover th {
background-color: #e6f7ff;
transition: background-color 0.2s ease;
}
常见陷阱：
- 不要写
transition: all 0.2s—— 会过渡所有可动画属性（包括 height、font-size 等），导致意外抖动 - 如果表格用了
border-spacing，hover 时改边框颜色不会自动过渡，因为border-color不在<td> 默认样式里，需显式声明初始值：<code>td { border-color: transparent; } - 深色主题下注意颜色对比度，
#f0f8ff在黑底上几乎不可见，可用color-scheme: dark媒体查询做适配
hover 的边界很窄：它只响应指针位置，不感知数据状态，也不替代可访问性交互（比如键盘 focus）。真要做强交互，得搭配 :focus-within 或 JavaScript 控制 class。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
