可行但需注意兼容性与实现细节：IE8及更早版本不支持tr:hover，现代浏览器均支持；常见失效原因是td/th背景覆盖、border-collapse影响渲染、CSS优先级冲突或移动端hover不可靠，应通过tr:hover td/th统一设置背景并配合@media (hover: hover)等策略增强鲁棒性。
hover伪类对元素的支持是否可靠
直接给 <tr> 添加 :hover 是可行的，但要注意：IE8 及更早版本不支持 <tr> 上的 :hover（只支持 <a>），现代浏览器（Chrome/Firefox/Safari/Edge）均无问题。如果你不需要兼容 IE8，放心用；若需兼容，得用 JavaScript 或降级到 <td> 上加 hover。
为什么:hover写在tr上却没反应
常见原因不是语法错，而是 CSS 优先级或继承干扰。比如表格设置了 border-collapse: collapse，而 <tr> 本身不渲染背景色——它依赖子元素 <td> 或 <th> 才能显色。所以单纯写 tr:hover { background: #f0f0f0; } 可能“看不见”效果。
- 确保
<td> 和 <th> 没有覆盖背景色（比如设了 background: white）
- 推荐写成
tr:hover td, tr:hover th { background: #f5f5f5; }，更稳妥
- 避免父容器（如
<table>）设置了 overflow: hidden 或裁剪样式，导致高亮被截断
如何让悬停高亮不影响边框样式
表格启用 border-collapse: collapse 后，<tr> 悬停时若只改 <td> 背景，边框可能仍显示原色，造成视觉割裂。解决关键是统一控制边框颜色：
tr:hover td, tr:hover th {
background: #f9f9f9;
border-color: #e0e0e0;
}
注意：border-color 必须作用在 <td>/<th> 上（它们才有边框），且前提是这些单元格本身定义了 border（哪怕只是 1px solid transparent）。
立即学习“前端免费学习笔记（深入）”；
移动端 touch 设备上:hover 是否生效
大多数 iOS Safari 和 Android Chrome 在非链接元素上会延迟或忽略 :hover，尤其在纯触屏设备上——用户没有“悬停”动作。这不是 bug，是浏览器主动限制。
- 不要依赖
:hover 做关键交互反馈（比如隐藏/显示操作按钮）
- 如需类 hover 效果，建议用 JavaScript 监听
touchstart + touchend 切换 class
- 或者用媒体查询兜底：
@media (hover: hover) { tr:hover td { ... } }，避免触屏设备误触发
真正容易被忽略的是：即使写了 :hover，在 iPad 上首次点击某行后，该行会“卡住”高亮状态，直到点击别处——这是 Safari 的 hover 模拟机制导致的，没法纯 CSS 解决。
直接给 <tr> 添加 :hover 是可行的，但要注意：IE8 及更早版本不支持 <tr> 上的 :hover（只支持 <a>），现代浏览器（Chrome/Firefox/Safari/Edge）均无问题。如果你不需要兼容 IE8，放心用；若需兼容，得用 JavaScript 或降级到 <td> 上加 hover。
为什么:hover写在tr上却没反应
常见原因不是语法错，而是 CSS 优先级或继承干扰。比如表格设置了 border-collapse: collapse，而 <tr> 本身不渲染背景色——它依赖子元素 <td> 或 <th> 才能显色。所以单纯写 tr:hover { background: #f0f0f0; } 可能“看不见”效果。
- 确保
<td>和<th>没有覆盖背景色（比如设了background: white） - 推荐写成
tr:hover td, tr:hover th { background: #f5f5f5; }，更稳妥 - 避免父容器（如
<table>）设置了overflow: hidden或裁剪样式，导致高亮被截断
如何让悬停高亮不影响边框样式
表格启用 border-collapse: collapse 后，<tr> 悬停时若只改 <td> 背景，边框可能仍显示原色，造成视觉割裂。解决关键是统一控制边框颜色：
tr:hover td, tr:hover th {
background: #f9f9f9;
border-color: #e0e0e0;
}
注意：border-color 必须作用在 <td>/<th> 上（它们才有边框），且前提是这些单元格本身定义了 border（哪怕只是 1px solid transparent）。
立即学习“前端免费学习笔记（深入）”；
移动端 touch 设备上:hover 是否生效
大多数 iOS Safari 和 Android Chrome 在非链接元素上会延迟或忽略 :hover，尤其在纯触屏设备上——用户没有“悬停”动作。这不是 bug，是浏览器主动限制。
- 不要依赖
:hover做关键交互反馈（比如隐藏/显示操作按钮） - 如需类 hover 效果，建议用 JavaScript 监听
touchstart+touchend切换 class - 或者用媒体查询兜底：
@media (hover: hover) { tr:hover td { ... } }，避免触屏设备误触发
真正容易被忽略的是：即使写了 :hover，在 iPad 上首次点击某行后，该行会“卡住”高亮状态，直到点击别处——这是 Safari 的 hover 模拟机制导致的，没法纯 CSS 解决。
