当鼠标移动到表格行时背景色发生改变

2025-05-31 01:40:40

1、方式一：当鼠标经过表格的一行，行的背景为灰色<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>当鼠标经过表格的一行时这一行的背景颜色发生改变</title> <style type="text/css"> table, th, tr, td{ width:500px; border:1px solid red; border-collapse:collapse; } tr, td{ text-align:center; height:50px; /*line-height:35px; 和 height都可以表示文字在表格中垂直居中*/ } tr:hover{ background: #1311F3; } </style></head><body> <table > <thead> <tr> <th>学号</th> <th>姓名</th> <th>数学</th> <th>语文</th> </tr> </thead> <tbody> <tr> <td>001</td> <td>张三</td> <td>92</td> <td>98</td> </tr> <tr> <td>002</td> <td>李四</td> <td>99</td> <td>88</td> </tr> </tbody> </table></body></html>

2、方式二：当鼠标经过表格的一行，行的背景为灰色，移出，行背景变为普蓝色。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>当鼠标经过表格的一行时这一行的背景颜色发生改变方法2</title> <style type="text/css"> table, th, tr, td{ width:500px; border:1px solid red; border-collapse:collapse; } tr, td{ text-align:center; height:50px; /*line-height:35px; 和 height都可以表示文字在表格中垂直居中*/ } </style></head><body> <table > <tr onmouseover="this.style.background='gray'" onmouseout="this.style.background=' #489faf'"> <th>学号</th> <th>姓名</th> <th>数学</th> <th>语文</th> </tr> <tbody> <tr onmouseover="this.style.background='gray'" onmouseout="this.style.background='white'"> <td>001</td> <td>张三</td> <td>92</td> <td>98</td> </tr> <tr onmouseover="this.style.background='gray'" onmouseout="this.style.background='white'"> <td>002</td> <td>李四</td> <td>99</td> <td>88</td> </tr> <tr onmouseover="this.style.background='gray'" onmouseout="this.style.background='white'"> <td>003</td> <td>张华</td> <td>92</td> <td>90</td> </tr> </tbody> </table></body></html>

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。