如何实现文字悬停时显示30px圆形渐变高亮效果（支持文字本身为渐变色）_技术教程

本文详解如何在保持文字默认线性渐变色的基础上，实现鼠标悬停单个字母时，以30×30px圆形区域叠加另一层渐变蒙版（非填充色），且不破坏文字可交互性与视觉一致性。

要实现「文字常态为渐变色 + 悬停单个字母时出现30px×30px圆形渐变高亮」的效果，核心难点在于：纯文本无法直接应用圆形裁剪或局部遮罩；fill: transparent 会丢失事件捕获；CSS background-clip: text 不支持 hover 局部重绘。因此，必须采用「语义化拆分 + 定位覆盖」的方案，而非试图直接修改的背景行为。

✅ 正确思路：将每个字母封装为独立可定位容器

原代码中 Get to know... 是一个整体，无法对单个字母做独立 hover 响应和圆形定位。需先将文本逐字拆解为带唯一坐标的或元素，并为其添加绝对定位能力：

配合 CSS 实现基础渐变文字效果（保持原逻

辑）：

.letter {
  display: inline-block;
  position: relative;
  color: transparent;
  background: linear-gradient(180deg, rgba(26, 33, 44, 0.5) 0%, rgba(255, 255, 255, 0.3) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  /* 关键：启用 pointer-events，确保可触发 hover */
  pointer-events: auto;
}

/* 悬停时显示圆形高亮蒙版（伪元素） */
.letter:hover::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 33, 44, 0.5) 0%, rgba(25, 50, 25, 0.3) 100%);
  z-index: 1;
  mix-blend-mode: overlay; /* 避免遮盖文字，用混合模式叠加 */
}

? 为什么不用 fill: transparent 导致失焦？因为 transparent 是颜色值，不影响 pointer-events；真正导致失焦的是父容器（如 .myText）设置了 pointer-events: none，或 .letter 未显式声明 pointer-events: auto（默认为 auto，但若祖先设为 none 则继承）。务必检查并显式启用。

✅ 动态光标联动（适配圆形高亮）

你已用 GSAP 实现大球跟随，但需增强其「感知悬停目标」能力：

// 改进后的 hover 监听（绑定到每个 .letter）
document.querySelectorAll('.letter').forEach(letter => {
  letter.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: 4,
      x: x - 15, // 30px 圆直径 → 半径15
      y: y - 15,
      ease: "power2.out"
    });
  });

  letter.addEventListener('mouseleave', () => {
    TweenMax.to(bigBall, 0.3, {
      scale: 1,
      ease: "power2.in"
    });
  });
});

同时，移除 SVG 的 fill: #f7f8fa（避免干扰混合模式），改为：

.cursor__ball circle {
  fill: transparent; /* 仅作定位锚点，不参与渲染 */
}

⚠️ 注意事项与优化建议

性能提示：逐字拆分后 DOM 节点增多，建议仅对可见区域文字处理（结合 IntersectionObserver 懒加载）；
可访问性：保留原始
语义，.letter 仅作视觉增强，勿移除文本内容；
响应式适配：30px 圆形在高清屏下可能偏小，可用 min(30px, 3vw) 替代；
渐变兼容性：确保 -webkit-background-clip: text 和 background-clip: text 同时存在，覆盖 Safari/Chrome；
备选方案（更轻量）：若无需精确 30×30px，可用 text-shadow 模拟模糊圆形光晕（但缺乏精准裁剪）。