前言

项目中表格做了一个功能当搜索时，将搜索出的行进行高亮显示。比如：

但是客户最近提了个问题，希望鼠标移入时高亮颜色不要变。

解决

鼠标移入颜色改变是引入当鼠标移入时，tr上自动添加了一个hover-row的样式，这个在控制台中开源清晰的看到

有问题当然先百度一下看看有没有解决方案，查到的到多少解决方案都是下面这个：

 /deep/.el-table__body tr:hover > td{background-color:transparent !important;}

但是这种方案有个问题，那就是存在固定列时会出现一边解决另一个有问题的情况，如下图：

最后是如何解决的呢？翻了一下源码，可以看到：

既然源码这样写，那咱就这样改

/deep/ tr.hover-row {&, &.el-table__row--striped {&, &.current-row {> td.el-table__cell {background-color: transparent;}}}
}

最终效果

注：
这里说一下设置成透明的原因，如果将颜色设置为高亮的颜色，对于高亮行是没有影响，但是对于非高亮行来说，当鼠标悬浮时会出现一个高亮的效果，这与需求是不符的。

el-table 鼠标悬浮时样式的修改相关推荐

关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题
table 鼠标悬停时高亮背景颜色的修改 .el-table tbody tr:hover>td { background-color: #颜色 } 或 .el-table__body-wrap ...
layui使用tips_使用layer.tips实现鼠标悬浮时触发事件提示消息实现
代码: 你瞅啥!?过来试试! 方法一: function show(id) { layer.tips("左边么么哒", "#"+id+"", ...
AntV的花瓣图中鼠标悬浮提示信息去掉与修改
场景 SpringBoot+AntV实现饼状图中的花瓣图: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/92810169 在实现 ...
web自动化时，怎么定位鼠标悬浮时才出现的元素
web自动化时,怎么定位鼠标悬浮时才出现的元素如图所示, 想要定位"修改密码",必须先鼠标悬浮在头像位置,才能看到修改密码,然后按正常操作在F12里就没办法定位"修改 ...
html旋转墙壁效果,css3实现照片墙效果，鼠标悬浮时旋转放大并摆正
一张张照片散乱的撒在一起,鼠标悬浮时旋转放大并摆正,效果如下图(所有图片均来自网络),主要使用到的css3属性有:transition.transform(scale.rotateZ).box-sha ...
CSS实现鼠标悬浮时背景图片拉近且增加遮罩层效果
效果预览点击查看效果我们在浏览网站时会发现有一些图片在鼠标悬浮在上时会有放大拉近的效果. 想要实现这个效果有两种方法,第一种方法是控制背景图片,第二种方法是控制插入的图片,我们这里介绍第一 ...
css简单实现鼠标悬浮时图片向上浮动的效果
文章目录前言一.效果图二.使用步骤 1.HTML代码 2.CSS代码总结前言 css简单实现鼠标悬浮时图片向上浮动的效果一.效果图二.使用步骤 1.HTML代码代码如下(示例): &l ...
ZedGraph的曲线的LineItem对象的Tag属性存储信息进而在鼠标悬浮时进行显示
场景 Winform中设置ZedGraph鼠标悬浮显示距离最近曲线上的点的坐标值和X轴与Y轴的标题: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article ...
CSS鼠标悬浮及其样式
hover鼠标悬浮的使用和定义用法示例选择鼠标指针浮动在其上的元素,并设置其样式: .box:hover{background-color: red;} 定义和用法 :hover 选择器用于选择鼠 ...

el-table 鼠标悬浮时样式的修改

前言

解决

el-table 鼠标悬浮时样式的修改相关推荐

最新文章

热门文章