Layui表格单元格hover背景色不能靠CSS :hover直接生效，因td无独立hover状态且易被覆盖；必须用cellStyle占位配合done回调中绑定mouseenter/mouseleave事件，通过data-field精准定位列并切换预设class实现。
layui table 单元格 hover 背景色不能靠 CSS :hover 直接生效
layui 表格的 td 元素默认没有独立 hover 状态样式，直接写 .layui-table td:hover { background-color: #f0f9ff; } 会失效——因为 layui 内部用 tbody tr 做事件委托，且单元格本身无 padding 或明确背景层，css 伪类常被父级样式覆盖或未触发重绘。
真正可靠的方式是：在列配置中使用 cellStyle 函数 + 配合 jQuery 动态绑定 mouseenter/mouseleave，让样式随数据渲染和 DOM 生命周期同步。
用 cellStyle + 事件监听实现列级 hover 背景色
cellStyle 本身不响应鼠标事件，但它能为每个单元格生成带唯一标识的内联样式基础；再配合事件监听，才能精准控制“某列中某单元格”的悬停态。
- 必须在列定义里启用
cellStyle，返回空样式字符串作为占位（否则后续 JS 绑定可能找不到目标） - 所有 hover 逻辑必须放在
done回调中执行，确保td已真实挂载到 DOM - 用属性选择器定位特定列，例如
td[data-field="username"]，比 class 更稳定（Layui 不保证 class 一致性） - 不要用
$(this).css()直接改，避免与其他样式冲突；推荐切换预设 class，例如.col-username-hover
示例代码：
layui.table.render({
elem: '#demo',
cols: [[
{field: 'username', title: '用户名', cellStyle: function() { return ''; }},
{field: 'status', title: '状态', cellStyle: function() { return ''; }}
]],
done: function(res, curr, count) {
// 仅对 username 列单元格绑定 hover
layui.$('td[data-field="username"]').on('mouseenter', function() {
layui.$(this).addClass('col-username-hover');
}).on('mouseleave', function() {
layui.$(this).removeClass('col-username-hover');
});
}
});
CSS 需额外定义：
.col-username-hover {
background-color: #e6f7ff !important;
transition: background-color .2s;
}
为什么不能只用 CSS nth-child 或 data-index？
常见错误是试图用 td:nth-child(2):hover 或 tr[data-index="0"] td:eq(1):hover 实现列 hover，这在 Layui 下基本无效：
-
nth-child指的是 HTML 结构顺序，但 Layui 可能插入操作列、复选框列等隐藏列，导致序号错位 -
data-index是行索引，不是列索引；列没有独立data-index，只有data-field - 分页、排序、搜索后 DOM 重建，纯 CSS 无法感知数据语义，
:hover会丢失上下文 - 移动端 touch 设备不触发
:hover，而mouseenter在 Layui 中已被兼容处理
容易被忽略的关键点
最常卡住的地方不是写法，而是时机与作用域：
-
done回调必须存在，且事件绑定不能写在render外部——否则首次加载可能查不到td - 如果表格启用了
height和虚拟滚动，部分td是懒加载的，需监听scroll或用事件委托（如layui.$('.layui-table-body').on('mouseenter', 'td[data-field="xxx"]', ...)） - 多个表格共存时，确保选择器加了表格容器 ID，避免跨表误绑：
#userTable td[data-field="xxx"] - 若列内容是通过
templet渲染的复杂 HTML，td[data-field]仍有效，但 hover 区域以整个td为准，不是内部元素
真正起效的从来不是“怎么写”，而是“什么时候写”和“写给谁看”。data-field 是 Layui 唯一稳定暴露的列语义标识，所有 hover 控制都该从它出发。
