通过CSS的:hover伪类实现表格行高亮，首先构建基本表格结构，再添加tr:hover{background-color:#f0f8ff}样式，使鼠标悬停时行背景变色，还可结合nth-child(even)设置奇偶行不同底色，提升可读性。
实现表格行高亮效果，主要是通过 CSS 的伪类选择器和背景色变化来完成。当用户将鼠标悬停在某一行时，该行的背景色会改变，从而达到高亮效果。
1. 基本表格结构
先写一个简单的 HTML 表格：
| 姓名 | 年龄 | 城市 |
|---|---|---|
| 张三 | 25 | 北京 |
| 李四 | 30 | 上海 |
| 王五 | 28 | 广州 |
2. 添加悬停高亮样式
使用 :hover 选择器为表格行设置鼠标悬停效果：
table {
width: 100%;
border-collapse: collapse;
}
th, td {
padding: 10px;
text-align: left;
border-bottom: 1px solid #ddd;
}
th {
background-color: #f5f5f5;
}
tr:hover {
background-color: #f0f8ff;
}
说明：
– border-collapse: collapse 让边框合并，看起来更整洁。
– tr:hover 是关键，它让鼠标移到哪一行，哪一行就变色。
– 背景色 #f0f8ff 是浅蓝色，也可以换成其他颜色如 #ffebee（浅红）或 #e8f5e8（浅绿）。
3. 可选：为奇偶行添加不同背景色
提升可读性，可以用 zebra 条纹效果：
科威旅游管理系统源码
系统前端采用可视化布局，能自动适应不同尺寸屏幕，一起建站，不同设备使用，免去兼容性烦恼。系统提供列表、表格、地图三种列表显示方式，让用户以最快的速度找到所需行程，大幅提高效率。系统可设置推荐、优惠行程，可将相应行程高亮显示，对重点行程有效推广，可实现网站盈利。系统支持中文、英文，您还可以在后台添加新的语言，关键字单独列出，在后台即可快速翻译。
150 查看详情
立即学习“前端免费学习笔记（深入）”；
tr:nth-child(even) {
background-color: #f9f9f9;
}
tr:hover {
background-color: #d0ebff;
}
这样奇数行白底，偶数行浅灰，悬停时统一高亮，视觉更清晰。
基本上就这些，不复杂但容易忽略细节。只要加上 tr:hover 和合适的颜色，表格立刻就有交互感了。
以上就是如何用css实现简单表格高亮效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1071824.html
微信扫一扫 
支付宝扫一扫 
