使用tr:hover设置背景色可实现表格行高亮，配合transition添加过渡效果更平滑，如浅蓝或淡红色高亮，提升用户体验。
要实现表格行的高亮效果，可以使用css中的 :hover 伪类选择器，当鼠标悬停在表格的某一行时，改变该行的背景颜色，从而达到高亮的效果。
1. 基本html表格结构
先创建一个简单的表格：
<table><br> <tr><br> <td>张三</td><br> <td>25</td><br> <td>北京</td><br> </tr><br> <tr><br> <td>李四</td><br> <td>30</td><br> <td>上海</td><br> </tr><br> <tr><br> <td>王五</td><br> <td>28</td><br> <td>广州</td><br> </tr><br></table>
2. 添加CSS高亮样式
使用 tr:hover 来设置鼠标悬停时的背景色：
table {<br> width: 100%;<br> border-collapse: collapse;<br> font-family: Arial, sans-serif;<br>}<br><br>td {<br> padding: 10px;<br> border: 1px solid #ddd;<br>}<br><br>tr:hover {<br> background-color: #f0f8ff; /* 浅蓝色高亮 */<br>}
3. 可选：添加过渡动画更平滑
让高亮出现得更自然，可以加上过渡效果：
tr {<br> transition: background-color 0.3s ease;<br>}
立即学习“前端免费学习笔记（深入）”；
4. 完整示例
将HTML和CSS结合：
<style>
table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
td {
padding: 10px;
border: 1px solid #ddd;
}
tr:hover {
background-color: #ffeaea; /* 淡红色高亮 */
}
tr {<br> transition: background-color 0.3s ease;<br>}
</style>
<table><br> <tr><br> <td>张三</td><br> <td>25</td><br> <td>北京</td><br> </tr><br> <tr><br> <td>李四</td><br> <td>30</td><br> <td>上海</td><br> </tr><br> <tr><br> <td>王五</td><br> <td>28</td><br> <td>广州</td><br> </tr><br></table>
基本上就这些。只要用 tr:hover 配合背景色和过渡，就能轻松实现表格行高亮效果。