如何实现侧边栏菜单（sidebar menu）鼠标悬停（hover）时展开的效果？

以下提供两种可直接落地的实现方式，可根据实际业务场景选择： #

纯CSS实现（无JS依赖，适用基础场景） #

仅靠CSS伪类和过渡动画即可实现流畅的悬停展开效果，性能开销最低。

HTML结构 #

<div class="sidebar">
  <div class="menu-item">
    <span class="icon">🏠</span>
    <span class="menu-text">首页</span>
  </div>
  <div class="menu-item">
    <span class="icon">📁</span>
    <span class="menu-text">文件管理</span>
  </div>
  <div class="menu-item">
    <span class="icon">⚙️</span>
    <span class="menu-text">系统设置</span>
  </div>
</div>
<div class="main-content">
  页面主体内容区域
</div>

CSS代码 #

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  width: 60px; /* 收起状态仅展示图标 */
  background: #2b3445;
  transition: width 0.3s ease;
  overflow: hidden;
  z-index: 999;
}

/* 悬停触发展开 */
.sidebar:hover {
  width: 200px; /* 展开后宽度 */
}

.menu-item {
  display: flex;
  align-items: center;
  padding: 16px 18px;
  color: #fff;
  cursor: pointer;
  white-space: nowrap;
}

.menu-item:hover {
  background: #3b475c;
}

.icon {
  font-size: 20px;
  min-width: 24px;
  margin-right: 14px;
}

.menu-text {
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* 展开后显示菜单文字 */
.sidebar:hover .menu-text {
  opacity: 1;
  transition-delay: 0.1s; /* 延迟显示避免展开过程中文字挤压 */
}

/* 主内容区域适配侧边栏宽度变化 */
.main-content {
  margin-left: 60px;
  padding: 24px;
  transition: margin-left 0.3s ease;
}

.sidebar:hover + .main-content {
  margin-left: 200px;
}

JS增强实现（支持固定展开状态） #

如果需要点击侧边栏后固定展开状态，不需要一直悬停也能保持展开，可补充以下逻辑：

新增JS代码 #

const sidebar = document.querySelector('.sidebar')
// 点击侧边栏切换固定展开状态
sidebar.addEventListener('click', e => {
  // 可自行调整触发条件，比如仅点击指定切换按钮时触发
  if (e.target === sidebar) {
    sidebar.classList.toggle('fixed-open')
  }
})

补充CSS代码 #

/* 固定展开状态优先级高于悬停 */
.sidebar.fixed-open {
  width: 200px;
}
.sidebar.fixed-open .menu-text {
  opacity: 1;
}
.sidebar.fixed-open + .main-content {
  margin-left: 200px;
}

内容的提问来源于stack exchange，提问作者Juned Adenwalla