直接用 tr:hover 设置背景色即可实现整行高亮，兼容 IE9+；需避免 border-collapse: collapse 等干扰样式，推荐加 transition 过渡，并注意层叠顺序以解决斑马纹或表头冲突。
直接用 tr:hover 设置背景色就能实现鼠标移入整行高亮，这是最简洁、兼容性好（IE9+）的标准做法。
确保表格没有设置 border-collapse: collapse 以外的干扰样式（比如单元格自带 padding 或背景），否则高亮可能不均匀。
tr 元素设置 :hover 状态下的背景色transition 让颜色变化更柔和td/th 上单独设背景，否则会覆盖 tr 的 hover 效果示例代码：
table tr:hover {<br> background-color: #f5f5f5;<br> transition: background-color 0.2s;<br>}如果表格有 thead 或用了 tr:nth-child(even/odd) 斑马纹，hover 高亮可能被覆盖。
立即学习“前端免费学习笔记（深入）”；
tr:hover 样式写在斑马纹规则之后，利用 CSS 层叠优先级thead tr 单独控制，比如禁止表头高亮：thead tr:hover { background: none; }
thead tr:hover 并指定不同颜色多数现代浏览器都支持 tr:hover，但注意两点：
tr:hover，需 JS 模拟（一般已无需兼容）color: #333; border-bottom: 1px solid #e0e0e0;
基本上就这些。不需要 JS，纯 CSS 就能稳稳搞定整行高亮。
以上就是css表格鼠标移入整行高亮如何实现_使用 tr:hover 伪类设置行背景的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
广告Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
953
收藏
