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