<tr>标签本身无悬停效果，需CSS或JS实现；推荐用tbody tr:hover（需含<tbody>）、避免内联JS、注意IE8兼容性及移动端适配。
<tr> 标签本身不提供悬停效果，它只是语义容器；交互效果必须靠 CSS 或 JavaScript 驱动，且要注意 HTML5 已移除所有原生样式属性。
为什么直接给 <tr> 加 onmouseover 不推荐
虽然 <tr> 支持事件属性（如 onclick、onmouseover），但直接写内联 JS 会带来维护问题和可访问性风险：
- 无法复用逻辑，每行都要重复写相同 handler
- 鼠标移入
<td>内部时可能触发多次（因事件冒泡路径复杂） - 键盘导航或屏幕阅读器用户完全无法感知该交互
- 现代框架（React/Vue）中这类写法已被视为反模式
CSS 实现悬停最简方案：用 :hover 作用于 <tr>
这是最主流、性能最好、无障碍友好的方式。关键点是确保父级 <table> 有明确的渲染上下文：
- 必须把
<tr>放在<tbody>内（否则部分浏览器对:hover支持不稳定） - 避免在
<tr>上设置display: block等破坏表格布局的样式 - 悬停样式建议只改背景色或边框，不要触发布局重排（如
height、margin）
示例：
立即学习“前端免费学习笔记（深入）”；
<style>
tbody tr:hover {
background-color: #f5f5f5;
}
</style>
<table>
<thead><tr><th>姓名</th><th>年龄</th></tr></thead>
<tbody>
<tr><td>张三</td><td>28</td></tr>
<tr><td>李四</td><td>32</td></tr>
</tbody>
</table>
JavaScript 动态控制 <tr> 悬停状态的边界情况
当需要配合数据状态（比如“仅对已审核行启用悬停”）或第三方库时，才考虑 JS 方案。此时务必注意：
- 监听
mouseenter/mouseleave，而非mouseover/mouseout（后者会因子元素触发多次） - 用
event.currentTarget确保取到的是<tr>，不是<td> - 若表格支持排序/分页，需在 DOM 更新后重新绑定，或用事件委托（委托给
<tbody>） - 移动端无 hover，需额外处理
touchstart+touchend模拟（但通常应避免在移动设备上强依赖悬停）
容易被忽略的兼容性细节
看似简单的悬停，在老版本浏览器或特殊场景下仍有坑：
- IE8 及更早版本不支持
tbody tr:hover，只能退化为tr:hover（但需确保没有<thead>/<tbody>结构） - 如果
<tr>包含<input>或<button>，某些安卓 WebView 会拦截:hover，需加cursor: pointer触发 - 使用
transform: scale()类动画时，<tr>的变形会破坏表格行高计算，导致相邻行错位 - dark mode 下硬编码
#f5f5f5背景色可能对比度不足，应优先用color-scheme: light dark或 CSS 自定义属性
