layui侧边栏不支持悬停收缩图标自动展开子菜单，因图标与菜单独立；实际可行的是收缩时悬停菜单项显示文字提示或临时展开子菜单，需手动实现并注意兼容性问题。

layui 侧边栏本身不支持“鼠标悬浮收缩图标时自动展开子菜单”，因为收缩图标（通常是顶部左上角的三横线）和左侧菜单是两个独立区域，悬停图标不会触发菜单展开——它只控制整体宽度切换。你真正想实现的，是 侧边栏收缩状态下，鼠标悬停在某个菜单项图标上时，临时浮层显示完整文字或子菜单。这个效果可行，但需明确区分两种场景：

一、收缩状态下悬停菜单项，用 layer.tips 显示完整文字

这是最常用、最轻量的做法，适合文字被裁剪的 60px 收缩态：

• 确保菜单项链接结构为：<a href="""><i class="layui-icon"></i><span>系统管理</span></a>
• 给 .layui-side-collapsed .layui-nav-item a 加 CSS：隐藏 span，保留图标居中，点击区域仍有效
• JS 绑定悬停事件，用 layer.tips() 在图标旁显示文字：

示例代码：

$('.layui-side-collapsed .layui-nav-item a').on('mouseenter', function() {<br>  var text = $(this).find('span').text();<br>  if (text) {<br>    layer.tips(text, this, {<br>      tips: [2, '#393D49'], // 向右显示，深灰背景<br>      time: 2000,<br>      area: ['auto', 'auto']<br>    });<br>  }<br>});

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

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

下载

二、收缩状态下悬停菜单项，展开其子菜单（需谨慎）

这不是 layui 原生行为，强行实现容易破坏导航状态。若确有需求，必须满足三个前提：

• 菜单使用 layui-nav-tree 结构，且每个父项含 <dl class="layui-nav-child">
• 子菜单默认 display: none，仅在悬停时设为 block，并加 position: absolute 和 left: 60px 定位
• 必须禁用 layui-nav-itemed 类的自动切换逻辑，避免与点击展开冲突；建议只对非一级菜单项启用此效果

注意：移动端 touch 事件可能误触发，且子菜单宽度若超过 body 可视区会溢出，需配合 max-width 和 white-space: nowrap 控制。

三、不推荐但有人尝试的方式：hover 触发侧边栏临时“半展开”

比如鼠标移到最右侧边缘（如一个 10px 宽的可拖拽线），侧边栏从 60px 慢慢扩到 200px；移出后缩回。这本质是模拟拖拽交互，不是“悬停图标显示子菜单”：

• 需监听 mousemove 判断 X 坐标是否靠近侧边栏右边界
• 用 addClass('hover-expanded') 触发 CSS 过渡：.layui-side.hover-expanded { width: 200px; }
• 该方式干扰用户操作节奏，且与官方 admin 模块的折叠逻辑冲突，容易导致 .layui-body left 值错乱