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

最新推荐文章于 2024-06-05 16:38:12 发布

原创最新推荐文章于 2024-06-05 16:38:12 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

vue 同时被 2 个专栏收录

16 篇文章

订阅专栏

css样式

13 篇文章

订阅专栏

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

部署运行你感兴趣的模型镜像

 
//没有固定的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;
    }
  }

您可能感兴趣的与本文相关的镜像