hover伪类示例（实现代码）
程序员文章站
2022-10-18 18:19:51
hover伪类示例
1、效果
鼠标悬停在某一记录行，背景色和字体颜色发生变化。
2、代码
hover伪类示例
1、效果
鼠标悬停在某一记录行，背景色和字体颜色发生变化。
2、代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hover伪类示例</title>
<style type="text/css">
.row:hover {
color: red;
background-color: lawngreen;
}
.heading {
color: white;
background-color: blue;
font-family: 楷体_GB2312;
}
table {
width: 300px;
border-radius: 5px;
box-shadow: 1px 1px 0 0 greenyellow;
}
table, tr, th, td {
text-align: center;
border: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
</style>
</head>
<body>
<table>
<tr class="heading">
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr class="row">
<td>001</td>
<td>洪文艳</td>
<td>女</td>
</tr>
<tr class="row">
<td>002</td>
<td>文刚</td>
<td>男</td>
</tr>
<tr class="row">
<td>003</td>
<td>童文举</td>
<td>男</td>
</tr>
<tr class="row">
<td>004</td>
<td>晓燕</td>
<td>女</td>
</tr>
</table>
</body>
</html> 上一篇： 设置超链接文本修饰教程
下一篇： Linux之rsync数据同步服务