您现在的位置：首页 >> 前端 >> 内容

hover伪类示例（实现代码）

时间：2018/2/24 14:09:10 点击：

　　核心提示：hover伪类示例1、效果鼠标悬停在某一记录行，背景色和字体颜色发生变化。2、代码!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8titlehover伪...

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>