最简实现是直接为tr元素设置:hover伪类样式。关键在于选择器必须作用于<tr>而非<td>或<table>，并确保HTML结构规范、无背景色覆盖、无优先级冲突，且注意触摸设备的hover限制。
表格行悬停高亮的最简实现方式
直接加 :hover 就能生效，不需要 JavaScript。关键在于选对 CSS 选择器 —— 必须作用在 <tr> 上，而不是 <td> 或 <table>。
常见错误是写成 td:hover，结果只能高亮单个单元格；或者把样式写在 table 上，完全没反应。
- 确保 HTML 表格结构规范：有
<table>、<tbody>（可选但推荐）、<tr>、<td>或<th> - CSS 写法必须是
tr:hover，且放在<style>标签或外部 CSS 文件里 - 如果用了
border-collapse: collapse，记得给tr:hover设置背景色时，颜色会覆盖边框缝隙，这是正常表现
为什么有时候 hover 不生效
最常遇到的是 CSS 优先级或继承干扰。比如表格单元格本身设置了 background-color，会盖住 tr:hover 的背景色；或者用了内联样式（style="..."）强行覆盖了 hover 效果。
- 检查是否在
td或th上写了固定background-color，删掉或改用transparent - 避免用
!important硬顶，优先靠选择器权重解决，例如写成tbody tr:hover比tr:hover权重更高 - 如果表格嵌套在其他元素中（比如
<div class="wrapper">），确认没有父级设置了overflow: hidden且裁剪了 hover 区域
兼容性与移动端注意事项
:hover 在桌面浏览器完全可靠，但在 iOS Safari 和部分安卓浏览器上，首次点击后才触发 hover（模拟“悬停”），且不会持续保持。这不是 bug，是触摸设备的设计限制。
立即学习“前端免费学习笔记（深入）”；
- 纯触屏设备无法真正“悬停”，所以不要依赖 hover 做关键交互（比如展开菜单、显示提示）
- 若需兼顾触摸设备，可额外加一个
.hover-active类，用 JavaScript 在touchstart时手动切换，但零基础阶段建议先专注桌面效果 - Chrome 和 Firefox 对
tr:hover支持良好；IE8 及更早版本不支持:hover伪类作用于非a元素，但 IE8 已基本淘汰，可忽略
一个可直接复制粘贴的最小示例
把下面代码保存为 index.html，双击用浏览器打开就能看到效果：
<!DOCTYPE html>
<html>
<head>
<style>
table { border-collapse: collapse; width: 100%; }
td, th { border: 1px solid #ccc; padding: 8px; text-align: left; }
tr:hover { background-color: #f5f5f5; }
</style>
</head>
<body>
<table>
<tr><th>姓名</th><th>城市</th></tr>
<tr><td>张三</td><td>北京</td></tr>
<tr><td>李四</td><td>上海</td></tr>
</table>
</body>
</html>
注意 tr:hover 这一行必须存在，且不能被其他样式覆盖；background-color 值可以任意改，比如 #eef 或 rgba(0,0,0,0.05) 都行。
真正容易被忽略的点是：表格内容为空行（<tr></tr>）也会响应 hover，如果不想让它高亮，就得加 class 控制，或者确保每行都有实际内容单元格。
