如何实现侧边菜单悬停时文本平滑滑入过渡（无需额外JS）

完全可行，不用写任何JavaScript，靠CSS就能实现文本显示/容器展开的平滑滑动过渡。

问题分析 #

你原来的代码用display: none/inline控制文本显示，但display属性不支持CSS过渡动画，所以悬停时文本会突然出现，没有平滑效果。我们需要改用支持过渡的属性来实现，比如width、opacity、overflow这些。

解决方案代码 #

HTML 调整

把原来的d-none类去掉，改用CSS控制初始隐藏状态：

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="row">
  <div class="col-10"></div>
  <div class="col-2">
    <ul class="nav nav-pills flex-column mb-auto">
      <li class="nav-item">
          <a href="#" class="nav-link active" aria-current="page">
              <i class="fa-solid fa-book"></i>
              <span class="nav-title">Bio</span>
          </a>
      </li>
      <li>
          <a class="nav-link" data-id="tags">
              <i class="fa-solid fa-tags"></i>
              <span class="nav-title">Tags</span>
          </a>
      </li>
    </ul>
  </div>
</div>

CSS 修改

核心是给文本添加过渡属性，用width和opacity实现平滑显示，同时让容器自然扩展：

:root {
    --darkblack: #000615;
    --black: #0B1721;
    --lightblack: #141B37;
    --yellow: #F7C921;
    --darkyellow: #a28b2a;
    --cyan: #21B7FF;
    --darkcyan: #1c7eaf;
    --magenta: #FF217D;
    --darkmagenta: #531a3b;
}

.nav {
  align-items: flex-end;
}

.nav-pills .nav-link {
  width: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 1rem;
}

.nav-pills .nav-link.active {
   color: var(--black) !important;
   background-color: var(--cyan);
 }

.nav-pills .nav-link:not(.nav-link.active) {
  color: var(--cyan) !important;
  cursor: pointer;
}

/* 文本初始状态：隐藏+透明 */
.nav-title {
  width: 0;
  opacity: 0;
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.3s ease, opacity 0.3s ease;
}

/* 悬停时展开文本 */
.nav-pills .nav-link:hover .nav-title {
  width: auto;
  opacity: 1;
}

关键细节说明 #

• 用width: 0替代display: none，配合overflow: hidden隐藏文本，宽度变化可触发过渡动画。
• opacity: 0/1让文本有淡入淡出效果，增强平滑感。
• white-space: nowrap确保文本不换行，保持横向展开的效果。
• 给.nav-link设置display: flex，让图标和文本对齐规整，容器会随文本宽度自动扩展，实现容器平滑展开。

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