html如何为表格添加鼠标悬停效果?

113次阅读
没有评论

HTML中可以使用CSS来为表格添加鼠标悬停效果,可以使用:hover伪类选择器来定义鼠标悬停时表格行的样式。

以下是一个完整的示例:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Table Hover Effect</title>
    <style>
        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            text-align: left;
            padding: 8px;
            border-bottom: 1px solid #ddd;
        }

        tr:hover {
            background-color: #f5f5f5;
        }
    </style>
</head>
<body>
<h1>Table Hover Effect</h1>
<table>
    <thead>
    <tr>
        <th>Name</th>
        <th>Age</th>
        <th>Gender</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>John Doe</td>
        <td>32</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>Jane Doe</td>
        <td>28</td>
        <td>Female</td>
    </tr>
    <tr>
        <td>Bob Smith</td>
        <td>41</td>
        <td>Male</td>
    </tr>
    <tr>
        <td>Susan Johnson</td>
        <td>49</td>
        <td>Female</td>
    </tr>
    </tbody>
</table>
</body>
</html>

在这个示例中,我们为表格定义了一个基本的样式,其中使用了border-collapse属性来将表格单元格的边框合并,使表格看起来更整洁。我们还使用了padding和border-bottom属性来定义表格单元格的内边距和下边框,以及text-align属性来设置单元格中文本的对齐方式。

然后,我们使用:hover伪类选择器来定义鼠标悬停时表格行的样式。在本例中,我们简单地将背景颜色设置为浅灰色。

通过这个示例,我们可以看到如何为表格添加简单的鼠标悬停效果,并通过CSS来定义样式。

正文完
 
评论(没有评论)