tr:hover 不生效因 默认 display: table-row，不直接渲染 background 等属性，且旧版浏览器或 border-collapse 异常时 hover 区域断裂；应改用 tr:hover td 或 JS 方案兼容 IE11。
hover 伪类直接作用在 <tr> 上为什么有时不生效
<p>因为 <code><tr> 默认是 display: table-row，它不接受部分 CSS 属性（比如 background、border）的直接渲染，尤其在某些旧版浏览器或嵌套了 <code><td> 内有 padding/border-collapse 的表格中，hover 效果会“透不过去”。更稳妥的做法是把 hover 绑定到 <code><td> 或 <code><th>，再用 <code>:hover 向上影响父级 <tr>。
<p>实操建议：</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20e695c2374.jpg" alt="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审">使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审</a>
<p>使用经过文档化的设计技能，从真实的品牌或项目背景中生成HTML原生原型、幻灯片、动态演示、可视化图表和评审流程。</p>
</div>
<a href="/xiazai/skill11445" title="使用华数设计生成高保真HTML原型、演示文稿、动画和设计评审" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul>
<li>确保表格设置了 <code>border-collapse: collapse，否则单元格间隙会导致 hover 区域断裂
<tr> 添加 <code>cursor: pointer，让用户感知可交互
<tr> 单独设 <code>background 后又在 <td> 里覆盖，这会引发层叠冲突
<li>示例写法：<pre class='brush:php;toolbar:false;'>table tr:hover td { background-color: #f0f8ff; }</pre></li>
<h3>需要兼容 IE11 时怎么写 hover 高亮</h3>
<p>IE11 支持 <code>:hover，但不支持 :hover 作用于非链接元素（如 <tr>）的子元素选择器（例如 <code>tr:hover td），除非该 <tr> 的父容器是 <code><a></a> —— 这显然不合理。所以必须降级为 JS 方案。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
addEventListener('mouseenter')和'mouseleave'分别添加/移除 class - 不要用
onmouseover，它会冒泡触发多次 - 为避免重复绑定，检查
tr是否已含高亮 class 再操作 - 示例关键逻辑：
document.querySelectorAll('table tr').forEach(row => { row.addEventListener('mouseenter', () => row.classList.add('hovered')); row.addEventListener('mouseleave', () => row.classList.remove('hovered')); });
使用 CSS transition 做渐变高亮要注意什么
表格单元格背景色过渡看似简单，但实际容易卡顿或跳变，核心原因是 background-color 在 <td> 上动画时，若其父 <code><tr> 没有显式定义 background，默认取 transparent，导致颜色混合不可控。
<p>实操建议：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
<ul><li>给 <code><tr> 设置初始 <code>background-color: white（或表格底色），再对 tr:hover 设目标色
<tr> 上，而不是 <code><td>，避免每个单元格单独运行动画
<li>慎用 <code>transition: all；只写 transition: background-color 0.2s ease
will-change: background-color（但仅在必要时加，避免过度触发合成）React/Vue 等框架中动态高亮被 key 重用干扰怎么办
当表格行由列表渲染、且 key 不稳定（比如用 index）时，hover 状态可能“粘”在错误的行上：视觉高亮没消失，或新行一上来就自带高亮。这不是 CSS 问题，而是组件状态未清理。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 避免用
index作key；优先用唯一 ID 字段（如item.id） - 不要把 hover 状态存在组件 state 里（比如
isHovered），改用纯 CSS 方案（即上面的tr:hover td）—— 最轻量也最可靠 - 如果必须用 JS 控制（比如要联动其他 UI），把 hover 状态存在 DOM dataset 中，而非 React state，并在
useEffect清理时同步移除 - Vue 用户注意：
@mouseenter绑定在<tr> 上时，v-for 的响应式更新可能延迟触发 class 切换，建议加 <code>v-once或用class="{ hovered: isHovered }"+ 正确的响应式依赖 表格悬停高亮看着简单，真正上线时最容易栽在 border-collapse 模式、IE 兼容路径切换时机、以及框架 key 与 DOM 状态不同步这三点上。动手前先确认你的表格结构是否干净，比堆 transition 更重要。
