table 鼠标悬浮到某一行的背景色

糊糊笙微

已于 2022-09-09 15:59:28 修改

阅读量516

点赞数

文章标签：前端 javascript vue.js

于 2021-07-14 11:06:56 首次发布

本文链接：https://blog.youkuaiyun.com/m0_51282855/article/details/118723155

版权

ant design 专栏收录该内容

3 篇文章

订阅专栏

这篇博客详细介绍了如何为Ant Design Vue的固定行和非固定行表格设置不同的鼠标悬停时的背景颜色。通过CSS样式`.ant-table-fixed.ant-table-row-hover`和`.ant-table-tbody>tr:hover:not(.ant-table-expanded-row)>td`，可以实现固定行的高亮效果，而使用`.ant-table-body.ant-table-row-hover`和`.ant-table-body.ant-table-row-hover>td`则可以设置无固定行表格的行高亮样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/有固定行的ant-design-vue 表格滑动样式/
.ant-table-fixed .ant-table-row-hover {
background: #eef1f6 !important;
}
.ant-table-fixed .ant-table-row-hover > td {
background: #eef1f6 !important;
}
/没有固定行的表格个样式/
.ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td {
background-color: #f1f6fd !important;
}
.ant-table-body .ant-table-row-hover {
background: #f1f6fd !important;
}
.ant-table-body .ant-table-row-hover > td {
background: #f1f6fd !important;
}