el-table:修改行hover样式

在使用el-table时，如果想要修改hover行的样式，可以使用CSS的:hover伪类来实现。比如，如果想要将hover行的背景色改为灰色，可以按以下步骤操作：

1. 给表格的样式加上一个class，比如"my-table"。
2. 在CSS文件中，添加以下样式：

.my-table tbody tr:hover {
background-color: #eaeaea;
}

这段代码的意思是，当鼠标hover到表格(my-table)的tbody内的任意一行(tr)时，该行的背景色会变成#eaeaea。

需要注意的是，如果el-table的样式被覆盖了，相关的样式也需要修改。同时，CSS的优先级问题可能会影响到样式的生效，可通过!important来解决。

相关问题

el-Table 取消hover

要取消 el-Table 的 hover 效果，你可以通过自定义 CSS 样式来覆盖默认的 hover 样式。你可以使用以下代码示例：

.el-table__row:hover {
  background-color: inherit; /* 取消hover时的背景颜色 */
  color: inherit; /* 取消hover时的文字颜色 */
}

将上述代码添加到你的样式文件中，然后确保该样式文件被正确引入到你的项目中。这样就能取消 el-Table 的默认 hover 效果了。

el-table fixed hover

el-table的fixed属性和hover效果可以通过以下样式实现：

当table没有加fixed属性时，可以使用以下样式来实现hover效果：
.el-table__body .el-table__row.hover-row td {
background-color: #fff !important;
}

当table加了fixed属性时，可以使用以下样式来实现hover效果：
.el-table tbody tr:hover > td {
background: #fff !important;
}

另外，如果想要更精确地设置hover的颜色，可以使用以下样式：
.el-table tbody tr:hover > td {
background-color: #颜色;
}
或者
.el-table__body-wrapper tbody tr:hover > td {
background-color: #颜色;
}

以上是el-table fixed属性和hover效果的实现方法。希望对你有帮助！<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [element 表格el-table改变hover背景颜色（fixed）](https://blog.csdn.net/weixin_63621456/article/details/125994643)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [关于element-ui 中 table 鼠标悬停时高亮背景颜色的修改，添加fixed后颜色又出现问题](https://blog.csdn.net/qq_47703624/article/details/114435077)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]