应使用事件委托监听 body 下的 .layui-table-body tr 元素，通过添加/移除 hover-row 类实现悬停高亮，禁用 layui 自带 hover 避免样式冲突，并兼容移动端 tap 交互。
用 mouseenter / mouseleave 监听表格行悬停事件
layui 表格本身不提供原生的 hover 高亮 api，必须靠 jquery 事件代理手动监听。直接绑定 .layui-table-body tr 容易在分页或重载后失效，所以要用事件委托方式挂到 body 或表格父容器上。
常见错误是监听 .layui-table tbody tr —— 分页切换后新生成的 tr 不会自动绑定事件；而监听 body 可以覆盖所有动态插入的行。
- 监听目标应为
".layui-table-body tr"，不是"tbody tr"，因为 layui 的实际内容区域在.layui-table-body内 - 不要在
mouseenter中用$(this).css('background', ...)直接写内联样式，否则会被 layui 重绘覆盖（比如排序、搜索触发的重渲染） - 推荐统一加/删 CSS 类，再用
!important确保优先级，例如.hover-row { background-color: #f9f9f9 !important; }
rowStyle 不适合做悬停效果，它只在渲染时执行一次
rowStyle 是配置项里的函数，在表格首次渲染或 reload 时调用，返回的样式会固化进 tr 的 style 属性。它无法响应鼠标实时进出，也不能动态更新——本质上是个静态样式计算逻辑。
如果你误把悬停逻辑塞进 rowStyle，比如：
rowStyle: function(row) {
// ❌ 错误：这里没有 mouseenter 上下文，永远拿不到“当前悬停的是哪一行”
return 'background-color: ' + (isHovered ? '#eee' : 'transparent');
}
结果就是：全表行都按同一个状态渲染，且无法响应交互。
-
rowStyle适合根据数据字段值做条件着色（如金额超限标黄），不适合交互反馈 - 悬停是 DOM 事件驱动的，必须走 JS 事件流，不能靠配置项“猜”用户行为
- 若同时用了
rowStyle和 hover 类，后者需加!important才能盖过前者
CSS :hover 为什么不够用？
单纯写 .layui-table tbody tr:hover { background-color: #f0f8ff !important; } 看似最简，但有三个硬伤：
- 移动端无 hover 效果（iOS/Android 不触发
:hover伪类） - 键盘用户（Tab 导航）无法获得同等视觉反馈
- 与 layui 自带的
.layui-table-hover类冲突——当启用hover: true时，该 class 会在鼠标移入时自动加，但移出后不一定清除干净，导致残留高亮
真实项目里更稳妥的做法是：禁用 layui 的 hover（hover: false），完全自己控制，避免样式打架。
完整可运行的 hover 高亮代码片段
把下面这段加在 table.render() 之后即可生效，兼容分页、重载、移动端 tap：
// 先定义 hover 样式（放 style 标签或外链 CSS 中）
.hover-row {
background-color: #f5f9ff !important;
cursor: pointer;
}
/* 移动端点击反馈 */
.hover-row {
-webkit-tap-highlight-color: transparent;
}
<p>// 再绑定事件
$('body').on('mouseenter', '.layui-table-body tr', function() {
$(this).addClass('hover-row');
}).on('mouseleave', '.layui-table-body tr', function() {
$(this).removeClass('hover-row');
});</p>
注意：mouseenter/mouseleave 比 mouseover/mouseout 更可靠，不会因子元素冒泡反复触发；cursor: pointer 是个细节，但能让用户明确感知该行可交互。
最容易被忽略的是移动端适配和与 layui-table-hover 的共存问题——不显式禁用 layui 的 hover 行为，就可能在鼠标移开后看到两套高亮逻辑互相覆盖，颜色忽明忽暗。
