欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

hover伪类示例(实现代码)

程序员文章站 2022-10-18 18:19:51
hover伪类示例 1、效果 鼠标悬停在某一记录行,背景色和字体颜色发生变化。 2、代码
hover伪类示例

1、效果

hover伪类示例(实现代码)

鼠标悬停在某一记录行,背景色和字体颜色发生变化。

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>