使用tr:hover设置背景色可实现表格行高亮，配合transition添加过渡效果更平滑，如浅蓝或淡红色高亮，提升用户体验。
要实现表格行的高亮效果，可以使用CSS中的 :hover 伪类选择器，当鼠标悬停在表格的某一行时，改变该行的背景颜色，从而达到高亮的效果。
1. 基本HTML表格结构
先创建一个简单的表格：| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
| 王五 | 28 | 广州 |
2. 添加CSS高亮样式
使用 tr:hover 来设置鼠标悬停时的背景色：table {
width: 100%;
border-collapse: collapse;
font-family: Arial, sans-serif;
}
td {
padding: 10px;
border: 1px solid #ddd;
}
tr:hover {
background-color: #f0f8ff; /* 浅蓝色高亮 */
}
3. 可选：添加过渡动画更平滑
让高亮出现得更自然，可以加上过渡效果：tr {
transition: background-color 0.3s ease;
}
富兰氏手机商城系统源码 2011
下载
全国首个为手机行业定制的网站，外观豪华、时尚。DIV+CSS构建，符合W3C标准，完美搜索引擎优化迅速提高搜索引擎排名，稳定性、执行效率、负载能力均居国内同类产品领先地位。安装简单，傻瓜式操作，在线下单、支付、发货，轻松管理网站。 多套模板更换，界面更加豪华 完美搜索引擎优化 集成支付宝、财付通、网银等多种在线支付平台 手机、配件商品不同颜色、型号不同价格设置 图片化多种参数设置、搜索、评论 新闻
立即学习“前端免费学习笔记（深入）”；
4. 完整示例
将HTML和CSS结合：| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
| 王五 | 28 | 广州 |
基本上就这些。只要用 tr:hover 配合背景色和过渡，就能轻松实现表格行高亮效果。
