HTML表格行悬停加粗看似简单，实际实现时却容易遇到各种问题。许多开发者直接对 tr:hover 设置 font-weight: bold，结果发现要么毫无效果，要么部分列无法加粗，要么文字渲染模糊。本文将系统解析这一技术点，逐一清除常见的踩坑误区。
使用 font-weight: bold 实现表格悬停加粗虽然直观，但也是极易出错的写法。要使其生效，必须确保目标元素没有受到内联样式或 !important 的干扰，同时未被更高优先级的 CSS 规则覆盖。常见的干扰因素有三种：td 或 th 上定义了 font-weight: normal !important；内联样式 style="font-weight: 400" 直接固定粗细；或者父级设置了 font-weight: 300，而 bold 在某些字体中实际映射为 700，导致视觉差异微小。因此，建议改用 font-weight: 600 或 700，以避免字体解析带来的歧义。
为什么加粗只命中了一半单元格？
这一现象源于一个常被忽略的细节：tr:hover 本身不会向子元素继承字体粗细，实际生效的是内部的 td 和 th。如果某些单元格拥有独立样式（例如 th 默认加粗，而 td 未设置），则会出现"半行加粗"的视觉断裂。解决方案是将样式统一应用于所有单元格：
- 使用
#myTable tr:hover td, #myTable tr:hover th { font-weight: 700; }明确指定 - 或更简洁地在
tr:hover后添加* { font-weight: 700; }——注意通配符影响性能，仅适合小表格 - 避免对
th单独设置font-weight: normal，否则 hover 时样式会被覆盖
加粗后文字发虚，问题出在哪？
这种现象并非浏览器 bug，而是次像素字体渲染的副作用，在 macOS 或高 DPI 屏幕上尤为明显。解决途径包括：在 tr:hover 或表格容器上添加 text-rendering: optimizeLegibility;；避免同时叠加过多 hover 效果（例如加粗+背景色+边框变色），只保留加粗与轻微背景色即可；确保所选字体支持粗体字重，例如 font-family: "Helvetica Neue", sans-serif; 比 "SimSun" 更稳定。
兼容性与边界情况
tr:hover 在 IE8+ 及所有现代浏览器中均受支持，但仍需注意三个实际限制：
- 若表格使用了
display: grid或display: flex改变布局，tr:hover将完全失效——必须恢复为原生
