如何实现过渡时所有块同步显示右侧文本及导航块悬停扩宽？

核心思路 #

通过调整HTML结构将图片与对应文本放在同一容器内，利用CSS的opacity/width属性结合transition实现文本的平滑显示，同时与你已实现的侧边栏宽度过渡动画保持同步。

步骤1：调整HTML结构 #

给每个子块添加文本容器，确保图片与文本处于同一父元素中：

<div class="block1">
  <div class="sidebar-item">
    <img src="your-icon-1.png" alt="功能图标1">
    <span class="item-text">功能1的详细说明</span>
  </div>
  <div class="sidebar-item">
    <img src="your-icon-2.png" alt="功能图标2">
    <span class="item-text">功能2的详细说明</span>
  </div>
  <div class="sidebar-item">
    <img src="your-icon-3.png" alt="功能图标3">
    <span class="item-text">功能3的详细说明</span>
  </div>
  <div class="sidebar-item">
    <img src="your-icon-4.png" alt="功能图标4">
    <span class="item-text">功能4的详细说明</span>
  </div>
  <div class="sidebar-item">
    <img src="your-icon-5.png" alt="功能图标5">
    <span class="item-text">功能5的详细说明</span>
  </div>
</div>

步骤2：CSS实现文本显示效果 #

保留你已有的侧边栏宽度过渡，新增文本显示的动画逻辑：

/* 你已实现的侧边栏宽度过渡 */
.block1 {
  width: 60px;
  background-color: #f5f5f5;
  transition: width 1s ease;
  overflow: hidden; /* 防止文本溢出 */
}
.block1:hover {
  width: 220px;
}

/* 子块布局：图片与文本横向排列 */
.sidebar-item {
  display: flex;
  align-items: center;
  padding: 12px 8px;
  gap: 10px;
  cursor: pointer;
}
.sidebar-item img {
  width: 40px;
  height: 40px;
  flex-shrink: 0; /* 图片保持固定尺寸不压缩 */
}

/* 文本默认隐藏，添加过渡动画 */
.item-text {
  opacity: 0;
  width: 0;
  transition: all 1s ease; /* 与侧边栏过渡时长一致，保证动画同步 */
  white-space: nowrap; /* 文本不换行 */
}

/* 触发文本显示：两种模式可选 */
/* 模式1：仅悬停的子块显示对应文本 */
.sidebar-item:hover .item-text {
  opacity: 1;
  width: auto;
}

/* 模式2：侧边栏悬停时所有文本显示（可选） */
/* .block1:hover .item-text {
  opacity: 1;
  width: auto;
} */

关键细节说明 #

• 用flex布局保证图片与文本横向对齐，flex-shrink:0避免图片被压缩
• 文本默认opacity:0+width:0实现完全隐藏，过渡动画与侧边栏宽度变化时长统一，视觉更协调
• 两种触发模式可根据需求选择：单块悬停显示对应文本，或侧边栏展开时全部文本显示

内容的提问来源于stack exchange，提问作者Tobias Rieper