侧边菜单悬停动画实现：默认仅显示图标，悬停展开至示例样式

我来帮你搞定这个侧边菜单的悬停展开效果，核心是用CSS过渡动画实现宽度和文字显隐的平滑变化，下面是完整的实现方案：

一、HTML结构（基于你提供的片段补充完整） #

<div id="sidebar">
  <div class="sidebar-wrapper">
    <div class="profile-menu d-flex flex-column flex-grow">
      <div class="sidebar-item">
        <a class="d-flex align-items-center" href="/">
          <i class="fa fa-lg fa-home"></i>
          <span>Home</span>
        </a>
      </div>
      <div class="sidebar-item">
        <a class="d-flex align-items-center" href="/profile">
          <i class="fa fa-lg fa-user"></i>
          <span>Profile</span>
        </a>
      </div>
      <div class="sidebar-item">
        <a class="d-flex align-items-center" href="/settings">
          <i class="fa fa-lg fa-cog"></i>
          <span>Settings</span>
        </a>
      </div>
    </div>
  </div>
</div>

二、核心CSS样式 #

#sidebar {
  /* 默认宽度仅够容纳图标，可根据你的图标大小调整 */
  width: 60px;
  background-color: #2c3e50;
  color: #fff;
  /* 宽度变化的平滑过渡动画 */
  transition: width 0.3s ease;
  height: 100vh;
  overflow: hidden; /* 隐藏超出默认宽度的文字 */
}

/* 悬停时展开侧边栏宽度 */
#sidebar:hover {
  width: 200px; /* 调整到能完整显示文字的宽度 */
}

.sidebar-wrapper {
  padding: 20px 0;
}

.sidebar-item {
  margin-bottom: 16px;
}

.sidebar-item a {
  color: #fff;
  text-decoration: none;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  gap: 20px; /* 图标和文字的间距 */
}

/* 默认状态下隐藏文字 */
.sidebar-item span {
  opacity: 0;
  /* 延迟显示文字，和宽度动画衔接更自然 */
  transition: opacity 0.2s ease 0.1s;
}

/* 悬停时显示文字 */
#sidebar:hover .sidebar-item span {
  opacity: 1;
}

/* 优化图标对齐，确保默认状态下位置整齐 */
.sidebar-item i {
  width: 30px;
  text-align: center;
}

三、效果说明 #

• 默认状态：侧边栏仅显示图标，文字被隐藏在侧边栏外
• 悬停状态：侧边栏平滑展开，文字逐渐显示，整个过程有流畅的过渡动画
• 如果你用了Bootstrap（代码里的d-flex等类能看出来），这个方案可以完美兼容，不需要调整现有布局类

内容的提问来源于stack exchange，提问作者Asaf Aviv