手抄报 安全手抄报 手抄报内容 手抄报图片 英语手抄报 清明节手抄报 节约用水手抄报

table鼠标滑过行变色

时间:2024-10-19 06:18:40

1、新建html页面。如图:

table鼠标滑过行变色

2、创建table。如图:

table鼠标滑过行变色

3、为了让效果很明显,先对table设置基本样式。如图:

table鼠标滑过行变色

4、在浏览器中打开新建的html页面。效果如图:

table鼠标滑过行变色

5、添加 table tr:hover{background-color: #dafdf3;} 设置鼠标滑过行背景变色,重新刷新浏览器页面。如图:

table鼠标滑过行变色
table鼠标滑过行变色

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>

© 手抄报圈