鼠标悬停在HTML-TABLE的某一行上改变这一行的背景颜色

最新推荐文章于 2026-01-09 14:03:25 发布

原创最新推荐文章于 2026-01-09 14:03:25 发布 · 6.1k 阅读

19 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

html

当前文章被收录于：

html

97 篇文章 1 人学习

订阅专栏查看详情

JS代码

当前文章被收录于：

JS代码

76 篇文章 1 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

这段代码展示了如何使用CSS实现当鼠标悬停在ID为table1的表格的行上时，行背景变为黄色的效果。主要关注选择器`tr:hover`的应用，用于改变表格行的 hover 状态样式。

主要CSS代码:

    #table1 tbody tr:hover {
        background-color: yellow;
    }

解释: ID为table1的table里的tbody里的tr的hover时,背景颜色改为:yellow 黄色...

主要是: tr:hover{ background-color: yellow; } 这一段...

完整代码:

<style>
    #table1 tbody tr:hover {
        background-color: yellow;
    }
</style>

<table id="table1" border="1" width="100%">
<thead>
    <tr>
        <th>日期</th>
        <th>供应商名称</th>
        <th>品牌</th>
        <th>品线</th>
        <th>品类</th>
    </tr>
</thead>
<tbody id="tbody1">
    <tr>
        <th>日期</th>
        <th>供应商名称</th>
        <th>品牌</th>
        <th>品线</th>
        <th>品类</th>
    </tr>
    <tr>
        <th>日期</th>
        <th>供应商名称</th>
        <th>品牌</th>
        <th>品线</th>
        <th>品类</th>
    </tr>
</tbody>
</table>