antd-vue table里hover行背景色修改

马娟

于 2021-09-06 16:55:20 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue css样式文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/weixin_41077029/article/details/120139426

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

css样式

13 篇文章

订阅专栏

这篇博客介绍了如何使用 CSS 修改表格的悬停效果，包括无固定背景颜色的悬停和有固定左右方向的悬停颜色。通过设置 `.ant-table-tbody` 和 `.ant-table-fixed` 类的选择器，可以实现不同情况下的背景颜色变化，增强了表格的视觉体验。

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

 
//没有固定的hover颜色修改
.ant-table-tbody{
    tr:hover:not(.ant-table-expanded-row) > td,.ant-table-row-hover,.ant-table-row-hover > td {
      background-color: @background-color-light; 
    }
  }
//有固定向左向右的hover颜色修改
  .ant-table-fixed{
    .ant-table-row-hover, .ant-table-row-hover>td{
      background-color: @background-color-light!important;
    }
  }