鼠标悬停追加innerText、移出时移除的JavaScript实现

DevOps 小满

2026-6-23

实现悬停显示文本的导航按钮优化方案

你的需求是让导航按钮在鼠标悬停时显示图标+对应文本，移出时仅保留图标，但当前代码存在以下问题：

使用innerText修改内容会破坏按钮内的图标元素结构，因为innerText仅处理文本内容，会覆盖掉<i>标签对应的Font Awesome图标
mouseout事件中用replace方法清理文本存在风险，若hover-text内容包含特殊字符或与其他文本重复，会导致错误替换

推荐方案：纯CSS实现（无需JavaScript）

这种方案性能更优，代码更简洁，且不会破坏DOM结构：

调整后的HTML

<button title="Style Guide" id="style-guide">
  <i class="fa-solid fa-border-top-left"></i>
  <span class="hover-text">Style Guide</span>
</button>

对应的CSS

/* 默认隐藏文本 */
button .hover-text {
  display: none;
  margin-left: 8px; /* 可根据需求调整图标与文本的间距 */
}

/* 鼠标悬停时显示文本 */
button:hover .hover-text {
  display: inline-block;
}

备选方案：改进版JavaScript实现

如果必须使用JavaScript，可通过单独的文本容器避免破坏图标结构：

调整后的HTML

<button title="Style Guide" id="style-guide" hover-text="Style Guide">
  <i class="fa-solid fa-border-top-left"></i>
  <span class="text-container"></span>
</button>

优化后的JavaScript

document.querySelectorAll("[hover-text]").forEach(element => {
  const textContainer = element.querySelector('.text-container');
  const hoverText = element.getAttribute('hover-text');
  
  element.addEventListener('mouseover', () => {
    textContainer.textContent = hoverText;
  });
  
  element.addEventListener('mouseout', () => {
    textContainer.textContent = '';
  });
});