前端开发中经常使用到table表格来显示数据，为了提高用户体验度当鼠标划过某行时会设置改行背痔辏哔刂景变色，如何使用css设置鼠标滑过表飙空蒈开格行背景变色？css提供了一个鼠标滑过:hover选择器,可以对tr设置hover选择器。语法：tr:hover{background-color:#dafdf3;}
方法/步骤
1、1.新建html页面。如图：
2、创建table。如图：
3、为了让效果很明显，先对table设置基本样式。如图：
4、在浏览器中打开新建的html页面。效果如图：
5、添加tabletr:hover{background-color:#dafdf3;}设置鼠标滑过行背景变色，重新刷新浏览器页面。如图：
6、所嘀芟苒疾有代码：<!DOCTYPEhtml><html><head><metacharset="炽扃仄呦UTF-8"><title>table鼠标滑过行变色</title><styletype="text/css">table{margin:10pxauto;width:500px;border-collapse:collapse;}tabletrtd{border:1pxsolid#e7e7e7;height:25px;}.title{text-align:center;font-weight:bolder;}tabletr:hover{background-color:#dafdf3;}</style></head><body><div>table鼠标滑过行变色</div><tablecellpadding="0"cellspacing="0"><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table></body></html>