layui侧边栏不支持悬停收缩图标自动展开子菜单，因图标与菜单独立；实际可行的是收缩时悬停菜单项显示文字提示或临时展开子菜单，需手动实现并注意兼容性问题。
layui 侧边栏本身不支持“鼠标悬浮收缩图标时自动展开子菜单”，因为收缩图标（通常是顶部左上角的三横线）和左侧菜单是两个独立区域，悬停图标不会触发菜单展开——它只控制整体宽度切换。你真正想实现的，是 侧边栏收缩状态下，鼠标悬停在某个菜单项图标上时，临时浮层显示完整文字或子菜单。这个效果可行，但需明确区分两种场景：
一、收缩状态下悬停菜单项，用 layer.tips 显示完整文字
这是最常用、最轻量的做法，适合文字被裁剪的 60px 收缩态：
- 确保菜单项链接结构为：
@#@#@#@#@#@#@#@#@#@0 - 给
.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 原生行为，强行实现容易破坏导航状态。若确有需求，必须满足三个前提：
- 菜单使用
layui-nav-tree结构，且每个父项含<dl class="layui-nav-child"></dl> - 子菜单默认
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-bodyleft 值错乱
