如何实现鼠标hover时文本字母切换字体或图标的交互效果？

这类效果通常被称为字符替换悬停动画或字体切换悬停效果，用这两个关键词就能搜到相关实现方案。

一、纯CSS实现固定字符替换 #

适合替换成固定字体字符或图标（比如图标字体），核心是把每个字符单独包裹，利用CSS伪类切换显示内容：

<style>
  .hover-switch {
    font-family: 'Arial', sans-serif;
    font-size: 2rem;
  }
  .hover-switch span {
    position: relative;
    transition: all 0.3s ease;
  }
  .hover-switch span::after {
    content: attr(data-replace);
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    font-family: 'Georgia', serif; /* 替换目标字体 */
    transition: opacity 0.3s ease;
  }
  .hover-switch span:hover::after {
    opacity: 1;
  }
  .hover-switch span:hover {
    opacity: 0;
  }
</style>

<div class="hover-switch">
  <span data-replace="H">H</span>
  <span data-replace="E">E</span>
  <span data-replace="L">L</span>
  <span data-replace="L">L</span>
  <span data-replace="O">O</span>
</div>

二、JavaScript实现动态随机替换 #

适合需要随机切换不同字符/图标的场景，通过监听鼠标事件动态修改字符内容：

<style>
  .dynamic-switch {
    font-family: 'Helvetica', sans-serif;
    font-size: 2rem;
  }
  .dynamic-switch span {
    transition: all 0.2s ease;
    cursor: pointer;
  }
  .icon-font {
    font-family: 'Font Awesome 6 Free'; /* 需先引入Font Awesome */
    font-weight: 900;
  }
</style>

<div class="dynamic-switch">Hello</div>

<script>
  const textContainer = document.querySelector('.dynamic-switch');
  // 拆分文本为独立span容器
  textContainer.innerHTML = textContainer.textContent.split('').map(char => 
    `<span data-original="${char}">${char}</span>`
  ).join('');

  // 定义替换字符池（可放图标编码、特殊字体字符）
  const replaceChars = ['😀', '😎', '🤓', '🦁', '⭐', '🔮'];
  const spans = textContainer.querySelectorAll('span');

  spans.forEach(span => {
    span.addEventListener('mouseenter', () => {
      const randomChar = replaceChars[Math.floor(Math.random() * replaceChars.length)];
      span.textContent = randomChar;
      span.classList.add('icon-font');
    });
    span.addEventListener('mouseleave', () => {
      span.textContent = span.dataset.original;
      span.classList.remove('icon-font');
    });
  });
</script>

注意事项 #

• 使用图标字体时，需提前引入对应图标库（如Font Awesome、Material Icons）
• 拆分字符时注意处理空格、特殊字符，避免布局错乱
• 可通过CSS transition 添加平滑过渡，提升交互体验

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