1、新建html页面。如图:
2、创建table。如图:
3、为了让效果很明显,先对table设置基本样式。如图:
4、在浏览器中打开新建的html页面。效果如图:
5、添加 table tr:hover{background-color: #dafdf3;} 设置鼠标滑过行背景变色,重新刷新浏览器页面。如图:
6、所有代码:<!DOCTYPE html><html><head> <meta charset="炽扃仄呦UTF-8"> <title>table鼠标滑过行变色</title> <style type="text/css"> table{margin: 10px auto; width: 500px; border-collapse: collapse; } table tr td {border:1px solid #e7e7e7; height: 25px;} .title{text-align: center; font-weight: bolder;} table tr:hover{background-color: #dafdf3;} </style></head><body> <div>table鼠标滑过行变色</div> <table cellpadding="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>