最稳妥取消layui表格hover变色的方法是覆盖.layui-table-hover的background-color为transparent并加!important;若启用斑马纹需同步重置tr.even/odd背景色;深色主题下还需调整hover行文字颜色确保可读性。

直接覆盖 .layui-table-hover 的 background-color 为透明
默认 hover 背景色由 .layui-table-hover 类控制,取消变色最稳妥的做法是把它设成完全透明或继承父级背景。不推荐删类或禁用事件——Layui 内部依赖这个 class 做状态管理(比如点击高亮、固定列同步等)。
在你自己的 CSS 文件里加这一行即可:
.layui-table-hover {
background-color: transparent !important;
}
注意必须带 !important,否则会被 layui 原生样式覆盖。这个写法兼容所有版本(2.5+),reload、分页、排序后依然生效。
如果表格用了斑马纹(even/odd 行),hover 时颜色仍可能“跳变”
因为 .layui-table-hover 和 .layui-table tbody tr.even 是两个独立规则,当 hover 状态叠加在偶数行上时,浏览器会按层叠顺序应用样式——哪怕你设了 transparent,如果 .even 自身有背景色,它仍可能被“透出”。
- 检查是否同时定义了
.layui-table tbody tr.even或.layui-table tbody tr.odd的背景色 - 若需彻底统一,建议一并重置:
.layui-table tbody tr.even, .layui-table tbody tr.odd { background-color: #fff !important; } - 或者更激进一点:把整张表的行背景都归零,只靠 hover 控制(但这样会丢失斑马纹)
别用 jQuery 绑定 mouseenter/mouseleave 去手动删 class
有人写 $('tbody tr').on('mouseenter', function(){ $(this).removeClass('layui-table-hover') }),这看似“取消”,实则埋雷:
- 遇到固定列(
fixed: 'left')或虚拟滚动(height设置)时,tbody 会被拆成多个 DOM 块,jQuery 选择器会漏掉部分tr - reload 后所有事件绑定丢失,hover 效果又回来了,且无法预测哪几行恢复
- 和 layui 内部的 hover 逻辑冲突,可能导致点击高亮失效、工具栏按钮响应异常
真正要“取消”,就该从样式源头下手,而不是在运行时和框架抢 DOM 控制权。
深色主题下要注意文字可读性
如果你的页面整体是暗色背景(比如 body { background: #1e1e1e }),而你把 .layui-table-hover 设为 transparent,那 hover 行的文字可能直接糊在深色背景上——因为 layui 默认文字色是 #333,没做对比度适配。
此时得同步补一句:
.layui-table-hover td {
color: #fff !important;
}
或者更稳妥地限定范围:.layui-table tbody tr.layui-table-hover td。不然表头、操作列、空数据提示等区域也可能被误影响。
这件事容易被忽略:改背景色只是第一步,文字是否还看得清,得自己盯一眼 hover 状态下的实际渲染效果。











