要自定义Layui弹出层“确定”按钮悬停颜色，需同时覆盖:hover和[disabled]状态样式，且必须限定父级.layui-layer-btn；异步弹层中应于success回调动态注入CSS或内联样式。

要让 Layui 弹出层（如 layer.confirm）的“确定”按钮在鼠标悬停时显示自定义颜色，不能只改 background-color，必须同时覆盖 :hover 和 [disabled] 状态样式，否则交互过程中会出现突兀的颜色跳变。

用 CSS 精准覆盖 hover 颜色

第一步：在页面加载完成后的任意 CSS 文件或

【必须带父级限定 .layui-layer-btn，否则会影响全局所有按钮】

.layui-layer-btn .layui-layer-btn0:hover { background-color: #409eff !important; border-color: #409eff !important; color: #fff !important; }

第二步：同步补全禁用态，避免用户快速点击后按钮变灰再闪回原色：

.layui-layer-btn .layui-layer-btn0[disabled] { background-color: #c0c4cc !important; border-color: #c0c4cc !important; color: #fff !important; }

注意：.layui-layer-btn0 是确认按钮的固定类名（Layui 2.5+ 稳定），但仅当按钮由 layer 自动渲染时才存在；若你用 content 自定义 HTML 并禁用了 btn，则此方法不生效。

异步弹层中动态注入样式

如果弹层内容是 AJAX 加载的（比如 layer.open 的 content 是 url），按钮会在 success 回调中才插入 DOM。此时直接写 CSS 可能来不及生效，需手动注入：

在 layer.open 的 success 回调里执行：

深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

$(layero).find('.layui-layer-btn0').css({ 'background-color': '#409eff', 'border-color': '#409eff', 'color': '#fff' });

同时为 hover 补充事件绑定（因内联样式无法响应伪类）：

$(layero).find('.layui-layer-btn0').hover( function() { $(this).css({ 'background-color': '#1890ff', 'border-color': '#1890ff' }); }, function() { $(this).css({ 'background-color': '#409eff', 'border-color': '#409eff' }); } );

彻底接管按钮并内联写 hover 样式

方法一：用 style 属性直接写 hover 效果（适用于简单定制）

layer.confirm('确定要删除吗？', { content: '

自定义内容

', btn: [], closeBtn: 1, shadeClose: true, success: function(layero) { const btn = $(layero).find('.layui-layer-btn'); if (btn.length === 0) { $(layero).append('

确定取消

'); } } });

方法二：用

在 success 回调中动态创建 style 标签：

const style = document.createElement('style'); style.textContent = '.layui-layer-btn0:hover { background-color: #1890ff !important; border-color: #1890ff !important; }'; $(layero).append(style);