如何实现鼠标位置文本局部变色及字母边框效果？求推荐库/函数

核心思路 #

无需额外依赖库，用原生HTML、CSS和JavaScript就能实现。关键是把目标文本拆分为单个字符的<span>元素，让每个字符可以单独被选中和修改样式，再结合鼠标事件跟踪当前指向的字符，同步更新跟随圆圈的位置。

具体实现步骤 #

• 拆分文本为独立字符容器：把文本的每个字符用<span>包裹，为单个字符的样式控制提供基础。
• 跟踪鼠标位置：通过mousemove事件实时获取鼠标坐标，同步更新跟随圆圈的位置；同时检测鼠标指向的<span>元素，切换其样式。
• 样式过渡效果：为字符和圆圈添加过渡动画，让交互更流畅。

代码示例 #

HTML #

<div class="text-container">
  Hello World!
</div>
<div class="mouse-circle"></div>

CSS #

.text-container {
  font-size: 2rem;
  position: relative;
  display: inline-block;
}

.text-container span {
  position: relative;
  padding: 2px;
  transition: all 0.2s ease;
}

.text-container span.hovered {
  color: #ff4500;
  border: 1px solid #ff4500;
  border-radius: 4px;
}

.mouse-circle {
  position: fixed;
  width: 30px;
  height: 30px;
  border: 2px solid #007bff;
  border-radius: 50%;
  pointer-events: none; /* 避免干扰鼠标对文本的点击/hover事件 */
  z-index: 1000;
  transition: transform 0.1s ease;
}

JavaScript #

const textContainer = document.querySelector('.text-container');
const mouseCircle = document.querySelector('.mouse-circle');

// 将文本拆分为单个字符的span元素
const rawText = textContainer.textContent;
textContainer.innerHTML = rawText.split('').map(char => `<span>${char}</span>`).join('');

// 监听鼠标移动事件
document.addEventListener('mousemove', (e) => {
  // 更新跟随圆圈的位置（减去半径让圆心对齐鼠标）
  mouseCircle.style.left = `${e.clientX - 15}px`;
  mouseCircle.style.top = `${e.clientY - 15}px`;

  // 移除上一个被hover的字符样式
  const prevHovered = document.querySelector('.hovered');
  if (prevHovered) {
    prevHovered.classList.remove('hovered');
  }

  // 获取当前鼠标指向的元素
  const targetElement = document.elementFromPoint(e.clientX, e.clientY);
  if (targetElement && targetElement.tagName === 'SPAN' && targetElement.parentElement === textContainer) {
    targetElement.classList.add('hovered');
  }
});

关键函数说明 #

• String.split('')：将完整文本拆分为单个字符的数组，方便逐个包裹<span>。
• document.elementFromPoint(x, y)：根据鼠标坐标获取当前指向的DOM元素，精准定位到鼠标下的字符容器。
• mousemove事件：实时触发，同步更新圆圈位置和字符样式，实现跟随与交互效果。

内容的提问来源于stack exchange，提问作者Alberto De Maria