hover伪类示例
【摘要】
hover伪类示例
1、效果
鼠标悬停在某一记录行，背景色和字体颜色发生变化。
2、代码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>h...
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>
文章来源: howard2005.blog.csdn.net，作者：howard2005，版权归原作者所有，如需转载，请联系作者。
原文链接：howard2005.blog.csdn.net/article/details/79358108
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）