修改ant-design表格hover的颜色和取消hover变色

最新推荐文章于 2024-08-29 15:03:58 发布
最新推荐文章于 2024-08-29 15:03:58 发布
阅读量5k 收藏 3
点赞数 1
分类专栏： React 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/123333080
版权
本文介绍了CSS中`:not()`选择器的使用，它用于选取不匹配指定类别的元素。例如，在表格样式中，`:not(.ant-table-expanded-row)`确保非展开行在鼠标悬停时应用特定背景色。示例展示了两种情况：当元素没有.showBlueGroup和.notHover类时，鼠标悬停背景分别为白色和淡蓝色。
摘要由CSDN通过智能技术生成

在这里插入图片描述
tr:hover:not(.ant-table-expanded-row)不过这里从来没有见过这种用法，这里记录一下：not() 匹配不符合一组选择器的元素，就是当元素有ant-table-expanded-row样式的时候，不会触发这个hover的样式。

例子
在这里插入图片描述
.tableGroup .@{ant-prefix}-table-tbody > tr.cuhk-nur-event-table-row:hover:not(.showBlueGroup) > td {
background: #fff;
}
.tableGroup .@{ant-prefix}-table-tbody > tr.cuhk-nur-event-table-row:hover:not(.notHover) > td {
background: #EBF9FF;
}

zuo_zuo_blog
关注
专栏目录
Vue3 - Element Plus 表格组件 table 隐藏鼠标移入时 hover 高亮背景色，el-table 组件去除鼠标悬停在表格行的 hover 高亮效果（完美解决表格合并后导致行错位）
王佳斌
02-19 5767
vue3，element plus，el-table，table表格，取消表格行row移入高亮效果，element plus表格组件去掉鼠标移入行时的hover效果，取消el-table的hover状态，取消高亮显示，隐藏表格鼠标hover效果，去除鼠标触摸变色效果，如何取消elementplus表格的行悬停效果，怎么将表格移入每行时的灰色高亮去掉，table的行hover如何去除，element的el-table合并，处理合并产生的hover样式问题，表格合并后鼠标移入hover出现异常问题，表格行被鼠标
史上最简单的Ant-Design换肤方案
weixin_33861800的博客
06-17 6625
先看成果 线上预览地址：Dynamic-Antd-Theme-Demo 看起来是不是还可以，如果你知道如何使用，相信你会更觉得我不是一个标题党。 // 如何使用 import DynamicAntdTheme from 'dynamic-antd-theme'; render() { ... <DynamicAntdTheme /> ... } 复制代码...
antd Table使用记录
An_cf的博客
09-12 4212
1.antd table如何关闭hover效果？ 需求原因：对于普通表格来说，antd表格的hover完全是可以的，但是在单元格进行了合并的复杂表格中，就会显得很怪； 解决方法： 样式覆盖--------------------- .ant-table-tbody > tr:hover > td{ background:transparent ! important;...
解决antd 鼠标悬浮颜色改变 以及移出无白色显示 注意代码顺序
m0_61505778的博客
08-29 182
important;important;
用antdsign组件的table 取消固定的滑过行样式
qq_43833839的博客
09-26 392
这样设置的话，table固定的滑过行样式就是透明色了，满足一些在大屏上展示表格的需求。
去除ant design vue中a-table组件鼠标悬停和选中行的样式
qq_57229245的博客
07-15 634
【代码】去除ant design vue中a-table组件鼠标悬停和选中行的样式。
ant-design-vue中table数据在鼠标hover时去掉当前行显示的背景色
Yukinoshita_kino的博客
02-21 5900
ant-design、element-ui等UI框架中，table列表的数据，在鼠标悬停(hover)时，去掉当前行所默认显示的背景颜色.
使用vue结合antd-design-vue组件库中的表格a-table的时候，去掉鼠标悬浮背景行高亮
THY0827的博客
06-05 370
试用了很多方法，前两种不可用。
Antd 修改 a-table 悬浮颜色、表头背景色
m0_67021283的博客
12-01 2958
antd-vue
antd vue 自定义侧边栏svg图标、并改变图标颜色
zyf971020的博客
12-05 3352
antd vue 自定义侧边栏svg图标、并改变图标颜色
table去除鼠标悬停hover效果
热门推荐
淡然坊
09-27 2万+
网上有很多“table如何增加鼠标悬停效果”的这种帖子，无非就是加hover。但是我现在遇到了一个问题，我在项目中创建了干干净净的一个table，发现它居然是有鼠标悬停效果的，我猜估计是有一个全局的table样式起作用了，因为我当前的页面是通过seajs加上header,footer和左边的nav菜单构建起来的，可能会有一个我看不到的common.css。
记录一下按钮实现渐变边框跟antd的Button.js实现不同主题颜色
qq_36257356的博客
07-13 871
渐变边框按钮
a-table 点击当前行 改行添加背景颜色并去掉移入变色
最新发布
10-28
在Ant Design Vue (a-table)组件中，如果你想实现在点击当前行时改变该行的背景颜色，并移除鼠标悬停时的默认样式，你可以通过自定义列模板和JavaScript事件处理来实现这个功能。以下是一个简单的示例： 1. 首先，...
react antd-design 的 table组件改变行的背景颜色以及hover时一起改变
w319502537的博客
02-23 6694
react antd-design 的 table组件改变行的背景颜色以及hover时一起改变
ant-vue中a-table去除鼠标悬停背景色
m0_37583718的博客
04-03 7356
问题 使用a-table的时候，会发现鼠标移到某行，某行就会高亮或有背景色填充。那怎么去掉这个效果呢？ 解决 添加以下CSS即可： deep/ table tbody tr:hover>td { background-color:#ffffff!important } ...
修改el-table行悬停状态的背景颜色
weixin_60886885的博客
08-17 975
【代码】修改el-table行悬停状态的背景颜色。
Ant中Table表格的一些设置
2301_76315784的博客
09-19 749
1、相继导入表头，使用dataIndex与数据相对应，fixed确定位置，titile确定表格内容。在标签<a-table>中添加:rowClassName属性，以及添加addRowColor函数。2、导入表格内容，每条数据对象的对象名与columns中的dataIndex相对应。在<style>中添加oddRow与evenRow的样式。
antd-vue table里hover行背景色修改
马娟的博客
09-06 1296
//没有固定的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-r...
AntdesignVue a-table 选项禁用问题以及数据显示处理和点击行选中问题
朝花夕拾的博客
01-04 3960
1、控制选项禁用 2、用具名插槽处理数据显示。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值