如何实现文字悬停时显示圆形渐变高亮效果（30px×30px）

但注意：原代码中 的 fill: #f7f8fa 会导致遮罩显形且掩盖文字；若设为 fill: transparent，SVG 元素虽仍响应事件，但需确保其 pointer-events: visibleFill（默认即如此），且必须保留 stroke 或改用 mask/filter 实现镂空高亮——更推荐现代方案：

Stable Diffusion 2.1 Demo

最新体验版 Stable Diffusion 2.1

下载

✅ 推荐实现（CSS + JS 结合）

<!-- 在 .cursor__ball--big 内替换 SVG 为可渐变的 div -->
<div class="cursor__ball cursor__ball--big">
  <div class="hover-circle"></div>
</div>

.hover-circle {
  position: absolute;
  top: 0; left: 0;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 33, 44, 0.5) 0%, rgba(25, 50, 25, 0.3) 100%);
  transform: translate(-50%, -50%); /* 使中心对齐鼠标 */
  pointer-events: none; /* 确保不拦截底层文字事件 */
  opacity: 0;
  transition: opacity 0.3s ease;
}

// 修改 onMouseHover / onMouseHoverOut 逻辑，绑定到具体字母
document.querySelectorAll('.color-letters span').forEach(span => {
  span.addEventListener('mouseenter', (e) => {
    const rect = e.target.getBoundingClientRect();
    const x = rect.left + rect.width / 2;
    const y = rect.top + rect.height / 2;

    TweenMax.to(bigBall, 0.3, {
      scale: 1,
      opacity: 1,
      x: x - 15, // 减半宽高实现中心对齐
      y: y - 15,
      ease: Power2.easeOut
    });
  });

  span.addEventListener('mouseleave', () => {
    TweenMax.to(bigBall, 0.3, {
      opacity: 0,
      ease: Power2.easeIn
    });
  });
});

? 关键点说明：文字默认渐变通过 background-clip: text 实现，完全独立于遮罩层；遮罩层（.hover-circle）使用 pointer-events: none，避免抢夺鼠标事件；opacity 控制显隐，比 scale 更精准控制圆形范围（scale: 4 会放大整个 SVG 容器，破坏 30px 精度）；每个 包裹单个字母（需预处理 HTML），才能实现「按字母定位」。

⚠️ 注意事项

• 原始 HTML 中 是整段文本，需拆分为 Wor... 才能逐字母绑定事件；
• 若使用 GSAP 旧版（如 1.20.3），请确保 TweenMax 已正确引入，或升级至 GSAP 3（语法更简洁）；
• 渐变色建议统一定义为 CSS 变量（如 --hover-gradient），便于主题维护；
• 移动端需额外处理 touchstart/touchend 事件。

✅ 总结

你原先尝试直接修改文字自身样式来生成圆形是不可行的——CSS 无法将文本渲染为带渐变的圆形区域。正确路径是：文字负责内容与默认渐变，独立 DOM 元素负责悬停遮罩，通过 JS 精确定位+GSAP 平滑动画协同工作。此方案兼顾性能、可维护性与设计还原度，且完全支持双状态渐变一致性。