tr:hover变色的问题

原文地址:http://www.cnblogs.com/dedeyi/archive/2012/11/23/2783808.html



做表格隔行变色(高亮显示),可以通过设置css中的 tr:hover伪类属性达到效果,

但是,会出一点小问题。td的背景色会覆盖tr的背景色,

  在tr:hover下边加上一句:tr:hover td{background:none;}

.dataTable tr:hover
  {
      background :# gray ;
      }
  
.dataTable tr:hover td { background : none ;}

### 取消 `el-table` 的 Hover 变色效果 为了取消 `el-table` 中的 hover 变色效果,可以通过自定义 CSS 来覆盖默认样式。以下是几种实现方法: #### 方法一:通过全局样式修改 可以在项目的全局样式文件中添加如下代码来禁用 hover 效果: ```css .el-table__body .el-table__row.hover-row td { background-color: #fff !important; } ``` 这种方法适用于整个项目中的所有表格[^1]。 #### 方法二:局部作用域内的样式调整 如果只想影响特定页面上的表格,则可以采用带有 `scoped` 属性的方式,在组件内部编写更精确的选择器: ```html <template> <div> <el-table>...</el-table> </div> </template> <style scoped> /* 使用 :deep() 或 ::v-deep 处理深层嵌套 */ :deep(.el-table__body tr.hover-row > td.el-table__cell) { background-color: transparent !important; } </style> ``` 此方式仅对该组件生效,并且不会干扰到其他地方使用的相同类名[^2]。 #### 方法三:针对最新版本的 Element Plus (Vue3) 对于使用 Vue3 和 Element Plus 的开发者来说,推荐的做法是利用 `::v-deep` 宏指令来进行深层次的选择器穿透操作: ```css ::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td { background-color: unset !important; } ``` 这能够有效地阻止当鼠标悬浮于行上时触发的颜色变化行为[^3]。 以上三种方案都可以达到取消 `el-table` hover 变色的效果,具体选择哪一种取决于实际应用场景和个人偏好。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值