如何实现鼠标悬停时文字字符的变换效果？

一、实现方案 #

这类效果主要通过 CSS 或 CSS+JavaScript 实现，根据效果复杂度分为两种方式：

1. 纯CSS静态字符替换（适合简单固定替换） #

核心思路是给每个字符单独包裹<span>标签，利用:hover伪类结合content属性替换字符，配合过渡动画提升流畅度。

示例代码：

<!-- HTML结构 -->
<div class="hover-replace">
  <span>M</span><span>E</span><span>D</span><span>I</span><span>U</span><span>M</span>
</div>

/* CSS样式 */
.hover-replace span {
  display: inline-block;
  position: relative;
  transition: opacity 0.2s ease;
}
.hover-replace span:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* 逐个定义悬停时的替换字符 */
.hover-replace:hover span:nth-child(1):after { content: "X"; opacity: 1; }
.hover-replace:hover span:nth-child(1) { opacity: 0; }
.hover-replace:hover span:nth-child(2):after { content: "Y"; opacity: 1; }
.hover-replace:hover span:nth-child(2) { opacity: 0; }
/* 其余字符依此类推 */

2. JavaScript动态字符变换（适合随机/动态跳动效果） #

如果需要类似示例中字符随机切换、动态跳动的效果，需要用JS监听鼠标事件，配合定时器实现字符循环替换，鼠标离开时恢复原文字。

示例代码：

<!-- HTML结构 -->
<div class="dynamic-hover" data-original="MEDIUM">
  <span>M</span><span>E</span><span>D</span><span>I</span><span>U</span><span>M</span>
</div>

// JavaScript逻辑
const textContainer = document.querySelector('.dynamic-hover');
const charSpans = textContainer.querySelectorAll('span');
const originalChars = textContainer.dataset.original.split('');
// 自定义替换字符集合
const replaceChars = ['A','B','C','!','@','#','$','%','&','*'];

let timerList = [];

// 鼠标进入时启动字符变换
textContainer.addEventListener('mouseenter', () => {
  charSpans.forEach((span, idx) => {
    const timer = setInterval(() => {
      span.textContent = replaceChars[Math.floor(Math.random() * replaceChars.length)];
    }, 80);
    timerList.push(timer);
  });
});

// 鼠标离开时停止变换并恢复原文字
textContainer.addEventListener('mouseleave', () => {
  timerList.forEach(timer => clearInterval(timer));
  timerList = [];
  charSpans.forEach((span, idx) => {
    span.textContent = originalChars[idx];
  });
});

可以搭配CSS的transform属性添加缩放、位移动画，让效果更生动。

二、搜索关键词建议 #

如果需要查找更多相关资源，可使用以下关键词搜索：

中文关键词 #

• 鼠标悬停文字字符动态变换效果
• CSS/JS 文字hover字符替换动画
• 网页文字悬停字符跳动效果

英文关键词 #

• Text character transformation on hover CSS JS
• Animated text character swap on mouseover
• Dynamic hover effect for text characters

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