完美解决 Ant design vue 鼠标悬浮在列表某一行改变颜色

最新推荐文章于 2024-09-14 11:25:05 发布

夏小花花

最新推荐文章于 2024-09-14 11:25:05 发布

阅读量2.3k

点赞数 6

分类专栏： Vue javascript 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/xiaohua616/article/details/130532794

版权

javascript 同时被 2 个专栏收录

42 篇文章 1 订阅

订阅专栏

Vue

27 篇文章 0 订阅

订阅专栏

文章讲述了在使用Antdesignvue时如何更改列表行在鼠标悬停时的背景颜色。作者提供了在TabLayout.vue文件中添加CSS代码段的具体方法，将悬停行的背景色改为浅灰色，并指出此修改将影响所有列表的悬停效果。

摘要由CSDN通过智能技术生成

问题描述

最近这段时间刚接触Ant design vue，自我感觉和Element ui 还是有些差距的，今天遇到一个头疼的问题，当鼠标悬浮在列表中的某一行时，改变当前行的背景颜色，下面我来分享具体怎么解决的呢！

解决方案

打开前端，路径为：src --> components --> layouts --> TabLayout.vue
打开这个TabLayout.vue文件，将下面的这段代码添加到<style></style>标签中，修改background-color 背景颜色，我这边的需求是改成浅灰色，可以根据实际需求进行修改，注意使用这种方式修改，改动的是所有列表悬浮后的背景颜色

  .ant-table-tbody > tr:hover:not(.ant-table-expanded-row) > td,.ant-table-row-hover,.ant-table-row-hover>td{
    background-color: rgb(239, 242, 245) !important;
  }

  .ant-table-fixed .ant-table-row-hover,.ant-table-row-hover>td{
    background-color: rergb(239, 242, 245)d !important;
  }