可行但需注意兼容性与实现细节：ie8及更早版本不支持tr:hover，现代浏览器均支持；常见失效原因是td/th背景覆盖、border-collapse影响渲染、css优先级冲突或移动端hover不可靠，应通过tr:hover td/th统一设置背景并配合@media (hover: hover)等策略增强鲁棒性。
hover伪类对元素的支持是否可靠
直接给 <tr> 添加 <code>:hover 是可行的，但要注意：IE8 及更早版本不支持 <tr> 上的 <code>:hover（只支持 <a></a>），现代浏览器（Chrome/Firefox/Safari/Edge）均无问题。如果你不需要兼容 IE8，放心用；若需兼容，得用 JavaScript 或降级到 <td> 上加 hover。
<h3>为什么:hover写在tr上却没反应</h3>
<p>常见原因不是语法错，而是 CSS 优先级或继承干扰。比如表格设置了 <code>border-collapse: collapse，而 <tr> 本身不渲染背景色——它依赖子元素 <code><td> 或 <code><th> 才能显色。所以单纯写 <code>tr:hover { background: #f0f0f0; } 可能“看不见”效果。
- 确保
<td> 和 <code><th> 没有覆盖背景色（比如设了 <code>background: white）
- 推荐写成
tr:hover td, tr:hover th { background: #f5f5f5; }，更稳妥
- 避免父容器（如
<table>）设置了 <code>overflow: hidden 或裁剪样式，导致高亮被截断
如何让悬停高亮不影响边框样式
表格启用 border-collapse: collapse 后，<tr> 悬停时若只改 <code><td> 背景，边框可能仍显示原色，造成视觉割裂。解决关键是统一控制边框颜色：
<pre class="brush:php;toolbar:false;">tr:hover td, tr:hover th {
background: #f9f9f9;
border-color: #e0e0e0;
}</pre>
<p>注意：<code>border-color 必须作用在 <td>/<code><th> 上（它们才有边框），且前提是这些单元格本身定义了 <code>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> 添加 <code>:hover 是可行的，但要注意：IE8 及更早版本不支持 <tr> 上的 <code>:hover（只支持 <a></a>），现代浏览器（Chrome/Firefox/Safari/Edge）均无问题。如果你不需要兼容 IE8，放心用；若需兼容，得用 JavaScript 或降级到 <td> 上加 hover。
<h3>为什么:hover写在tr上却没反应</h3>
<p>常见原因不是语法错，而是 CSS 优先级或继承干扰。比如表格设置了 <code>border-collapse: collapse，而 <tr> 本身不渲染背景色——它依赖子元素 <code><td> 或 <code><th> 才能显色。所以单纯写 <code>tr:hover { background: #f0f0f0; } 可能“看不见”效果。
- 确保
<td> 和 <code><th> 没有覆盖背景色（比如设了 <code>background: white） - 推荐写成
tr:hover td, tr:hover th { background: #f5f5f5; }，更稳妥 - 避免父容器（如
<table>）设置了 <code>overflow: hidden或裁剪样式，导致高亮被截断如何让悬停高亮不影响边框样式
表格启用
border-collapse: collapse后，<tr> 悬停时若只改 <code><td> 背景，边框可能仍显示原色，造成视觉割裂。解决关键是统一控制边框颜色： <pre class="brush:php;toolbar:false;">tr:hover td, tr:hover th { background: #f9f9f9; border-color: #e0e0e0; }</pre> <p>注意：<code>border-color必须作用在<td>/<code><th> 上（它们才有边框），且前提是这些单元格本身定义了 <code>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 解决。 - 不要依赖
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
