Bootstrap 4导航栏：鼠标悬停切换链接文本（含动画需求）

当然可以实现，下面是直接可用的代码方案：

1. HTML结构（Bootstrap 4导航栏） #

给需要替换的链接加自定义类abbr-link，并把完整文本放在title属性里：

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">MySite</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarLinks" aria-controls="navbarLinks" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarLinks">
    <ul class="navbar-nav">
      <li class="nav-item active">
        <a class="nav-link" href="#">首页 <span class="sr-only">(当前)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link abbr-link" href="#" title="产品管理部">PM</a>
      </li>
      <li class="nav-item">
        <a class="nav-link abbr-link" href="#" title="质量保证中心">QA</a>
      </li>
      <li class="nav-item">
        <a class="nav-link abbr-link" href="#" title="用户体验设计">UX</a>
      </li>
    </ul>
  </div>
</nav>

2. CSS样式（控制动画与布局） #

设置固定宽度避免导航栏跳动，添加过渡动画效果：

/* 给缩写链接设置最小宽度，防止文本切换时导航栏跳动 */
.abbr-link {
  min-width: 60px;
  text-align: center;
  transition: all 0.3s ease;
}

/* 悬停时的高亮效果，和Bootstrap主题统一 */
.abbr-link:hover {
  color: #007bff !important;
}

3. JavaScript逻辑（处理文本切换） #

读取title属性的完整文本，在鼠标悬停/离开时切换并配合动画：

// 获取所有带缩写的导航链接
const abbrLinks = document.querySelectorAll('.abbr-link');

abbrLinks.forEach(link => {
  // 保存原始缩写文本和完整文本
  const originalAbbr = link.textContent.trim();
  const fullText = link.getAttribute('title');

  // 鼠标进入时替换为完整文本
  link.addEventListener('mouseenter', () => {
    link.style.opacity = '0';
    link.style.transform = 'translateY(-3px)';
    setTimeout(() => {
      link.textContent = fullText;
      link.style.opacity = '1';
      link.style.transform = 'translateY(0)';
    }, 150);
  });

  // 鼠标离开时恢复缩写文本
  link.addEventListener('mouseleave', () => {
    link.style.opacity = '0';
    link.style.transform = 'translateY(3px)';
    setTimeout(() => {
      link.textContent = originalAbbr;
      link.style.opacity = '1';
      link.style.transform = 'translateY(0)';
    }, 150);
  });
});

关键注意点 #

• 调整min-width的值，确保能容纳最长的完整文本，避免换行；
• 动画时间（代码里的150ms）可按需修改，和CSS过渡时间保持一致即可；
• 若不需要位移动画，只保留opacity的过渡效果会更简洁。

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