如何使用CSS设置表格鼠标悬停效果？

如何使用CSS设置表格鼠标悬停效果？

在本文中，我们将学习如何通过CSS来设置表格鼠标悬停效果。这是一个非常常见且实用的效果，可以提升表格的可读性和用户体验。

CSS代码示例：

/* 鼠标悬停效果 */
.table-hover tr:hover {
    background-color: #f5f5f5;
}

以上代码是设置表格鼠标悬停效果的简单CSS代码。首先，我们给表格的每一行添加了一个class为table-hover，然后使用:hover伪类选择器来定义鼠标悬停时的样式。

HTML代码示例：

<table class="table-hover">
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td>张三</td>
        <td>18</td>
        <td>男</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>20</td>
        <td>女</td>
    </tr>
</table>

以上是一个简单的表格示例，我们给表格添加了class为table-hover，这样就能直接应用上述CSS代码，实现鼠标悬停时的效果。

通过以上简单的CSS代码和HTML示例，你已经学会了如何使用CSS设置表格鼠标悬停效果。希望本文能对你有所帮助！

本文为翻滚的胖子原创文章,转载无需和我联系,但请注明来自猿教程iskeys.com

• 上一篇： 如何使用CSS设置表格的边框合并效果？
• 下一篇： 如何使用CSS设置表格奇偶行的不同背景色？