最简单有效的方式是直接覆盖 .layui-table-hover 类:.layui-table-hover { background-color: #e6f7ff !important;},必须加 !important 以确保生效,该方式兼容所有版本且 reload 后仍有效。
直接覆盖 .layui-table-hover 类最简单
layui 表格 hover 时的背景色由内置类 .layui-table-hover 控制,它通过 !important 强制生效。你不需要改源码或监听事件,只需在自己的 css 文件里加一行覆盖样式即可:
.layui-table-hover {
background-color: #e6f7ff !important;
}
注意必须带 !important,否则会被 layui 原生样式压掉。这个方式适用于所有版本(2.5+),且 reload、分页、排序后依然有效。
用 rowStyle 动态控制 hover 色会失效
rowStyle 只在渲染时执行一次,返回的是静态内联样式,它无法响应鼠标移入/移出动作。试图在 rowStyle 里写 hover: '...' 或类似逻辑完全无效——Layui 不解析这种伪类。
- 别写
rowStyle: function() { return { hover: 'background-color: #xxx' } }—— 这语法错误,也不被识别 - 也别指望用
css: { '&:hover': '...' }—— layui 不支持 CSS-in-JS 写法 - 真正要动态响应 hover,只能靠 CSS 类或事件委托,
rowStyle不是为此设计的
需要区分表头/数据行 hover?得单独选中
默认 .layui-table-hover 同时作用于 tbody 行和 thead 行(虽然表头 hover 场景少)。如果只想改数据行 hover 色,避免影响表头,推荐更精确的选择器:
.layui-table tbody tr:hover,
.layui-table tbody tr.layui-table-hover {
background-color: #e6f7ff !important;
}
这样能排除 thead tr,也兼容固定列(fixed)场景下拆分的多个 tbody。如果用了深色主题,记得同步检查文字对比度,比如加 color: #333 防止灰字糊在浅蓝底上。
jQuery 事件绑定容易漏掉虚拟滚动行
有人用 $('.layui-table tbody tr').hover(...) 手动加 class,这在无滚动、无 fixed 列的简单表格里能跑通。但一旦开启 height 或 fixed: 'left',layui 会把 tbody 拆成多个独立 DOM 块(主表体 + 左右固定列),jQuery 选择器会漏掉那些动态插入的 tr。
- 不要依赖
$(...).find('tr')遍历后加 class —— reload 或滚动后状态丢失 - 也不要给
tr绑定 mouseenter/mouseleave 后再操作style.backgroundColor—— 性能差,且与 layui 内部 hover 逻辑冲突 - 真要 JS 控制,应监听
table.on('row', ...)或用done回调统一打标,但纯 hover 场景没必要绕这么大弯
最稳的方式就是一条 CSS 覆盖 .layui-table-hover,其它方案要么多此一举,要么在复杂表格里掉链子。


















