当前位置： 移动技术网 > IT编程>网页制作>CSS > hover伪类示例（实现代码）

hover伪类示例（实现代码）

2018年02月25日  | 移动技术网IT编程  | 我要评论
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>

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网