当前位置：首页 > 文章列表 > 文章 > 前端 > 字母悬停渐变高亮实现技巧

字母悬停渐变高亮实现技巧

2026-04-10 10:57:45 0浏览收藏

✅ 正确技术路径解析

文字本体保持渐变文本色（始终生效）
使用 background-clip: text + color: transparent 是标准方案，但需注意：渐变必须定义在 background-image 上，而非 background 简写属性中，否则悬停时 CSS 动画可能失效。同时，为支持逐字母悬停，需将每个字符包裹为独立：


  
    
      
      Get t...

.color-letters span {
  display: inline-block;
  position: relative;
  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;
  color: transparent;
  /* 关键：启用 pointer-events 使每个字母可被 hover 捕获 */
  pointer-events: auto;
}

圆形高亮层：透明 SVG + 差值混合
你已正确使用 mix-blend-mode: difference 和 fill: #f7f8fa（接近白色），这是核心技巧：
- #f7f8fa 在深色背景（#010101）上经 difference 混合后会呈现明亮反色效果；
- 切勿设 fill: transparent —— 透明色无像素，无法触发混合，导致 hover 失效；
- 改用极浅灰（如 #fefefe）或纯白 #ffffff，确保有可混合的像素，同时视觉上“看似透明”。

.cursor__ball circle {
  fill: #ffffff; /* ✅ 替代 #f7f8fa，增强 contrast */
  mix-blend-mode: difference;
}

悬停响应：动态绑定事件 + 精准定位
原始代码中 onMouseHover() 仅缩放光标，但未关联具体字母。需为每个添加 mouseenter/mouseleave 监听，并在进入时记录目标位置，驱动光标移至该字母中心：

// 为每个字母 span 绑定事件
document.querySelectorAll('.color-letters span').forEach((letter, i) => {
  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, {
      x: x - 15,
      y: y - 15,
      scale: 1.8,
      ease: Power2.easeOut
    });
  });

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

⚠️ 注意：mousemove 全局监听仍需保留用于空闲移动，但 mouseenter 优先级更高，应覆盖其定位逻辑。

? 完整优化 CSS 补充（关键修复）

/* 确保字母可被精确捕获 */
.color-letters span {
  pointer-events: auto; /* 覆盖 body 的 cursor: none 影响 */
  display: inline-block;
}

/* 光标容器需脱离文档流，避免影响布局 */
.cursor__ball {
  pointer-events: none;
  transform: translate(-50%, -50%); /* 修正定位基准 */
}

/* SVG 圆形：30×30px 固定尺寸，居中锚点 */
.cursor__ball svg {
  width: 30px;
  height: 30px;
}
.cursor__ball circle {
  cx: 15;
  cy: 15;
  r: 15; /* 覆盖原 r="12"，确保 30px 直径 */
  fill: #ffffff;
  mix-blend-mode: difference;
}