React自定义光标：悬浮所有链接时切换样式的方案求助

嘿，完全懂你的困扰——逐个给页面里的链接加ref实在太繁琐了，尤其是没法掌控所有页面内容的时候。这里有两个高效的方案，帮你轻松实现全局链接悬浮时的光标切换效果，还能完美配合GSAP做动画：

方案一：利用事件委托监听全局链接事件 #

事件委托是这类全局元素交互场景的最优解，它借助DOM事件冒泡机制，只需要在顶层容器（比如document）上绑定一次事件，就能捕获所有链接的悬浮事件，哪怕是后续动态加载的链接也能生效。

下面是结合React Hooks和GSAP的完整代码示例：

import { useEffect, useRef } from 'react';
import gsap from 'gsap';

function CustomCursor() {
  const cursorSm = useRef(null);
  const cursorLg = useRef(null);

  // 光标切换的GSAP动画逻辑
  const handleLinkHoverEnter = () => {
    gsap.to(cursorLg.current, { 
      scale: 1.5, 
      opacity: 0.8,
      duration: 0.2,
      ease: 'power2.out'
    });
    gsap.to(cursorSm.current, { 
      scale: 0, 
      opacity: 0,
      duration: 0.2,
      ease: 'power2.out'
    });
  };

  const handleLinkHoverLeave = () => {
    gsap.to(cursorLg.current, { 
      scale: 1, 
      opacity: 1,
      duration: 0.2,
      ease: 'power2.out'
    });
    gsap.to(cursorSm.current, { 
      scale: 1, 
      opacity: 1,
      duration: 0.2,
      ease: 'power2.out'
    });
  };

  useEffect(() => {
    // 全局事件处理函数：判断触发元素是否是链接（或链接的子元素）
    const handleGlobalPointerEnter = (e) => {
      const targetLink = e.target.closest('a');
      if (targetLink) {
        handleLinkHoverEnter();
      }
    };

    const handleGlobalPointerLeave = (e) => {
      const targetLink = e.target.closest('a');
      if (targetLink) {
        handleLinkHoverLeave();
      }
    };

    // 绑定全局事件监听
    document.addEventListener('pointerenter', handleGlobalPointerEnter);
    document.addEventListener('pointerleave', handleGlobalPointerLeave);

    // 组件卸载时清理事件监听，避免内存泄漏
    return () => {
      document.removeEventListener('pointerenter', handleGlobalPointerEnter);
      document.removeEventListener('pointerleave', handleGlobalPointerLeave);
    };
  }, []);

  return (
    <>
      <div ref={cursorSm} className="cursor--sm"></div>
      <div ref={cursorLg} className="cursor--lg"></div>
    </>
  );
}

export default CustomCursor;

关键细节说明： #

• 使用closest('a')可以精准匹配到包含子元素的链接（比如<a href="#"><span>文字</span></a>这种结构），不会因为鼠标悬浮在子元素上而失效。
• 事件监听绑定在document上，覆盖页面所有区域，不管链接是静态渲染还是动态加载的都能触发。

方案二：CSS类配合GSAP动画（样式与逻辑分离） #

如果想把光标样式的基础控制和JS动画逻辑分开，可以通过给body添加/移除类的方式，结合GSAP做更复杂的动画：

第一步：添加CSS样式 #

.cursor--sm, .cursor--lg {
  /* 你的基础光标样式 */
  position: fixed;
  pointer-events: none;
  z-index: 9999;
}

/* 链接悬浮时的光标状态类 */
body.link-hover .cursor--sm {
  scale: 0;
  opacity: 0;
}
body.link-hover .cursor--lg {
  scale: 1.5;
  opacity: 0.8;
}

第二步：React组件逻辑 #

import { useEffect, useRef } from 'react';
import gsap from 'gsap';

function CustomCursor() {
  const cursorSm = useRef(null);
  const cursorLg = useRef(null);

  useEffect(() => {
    // 预定义GSAP时间线动画
    const linkHoverTimeline = gsap.timeline({ paused: true })
      .to(cursorSm.current, { scale: 0, opacity: 0, duration: 0.2 })
      .to(cursorLg.current, { scale: 1.5, opacity: 0.8, duration: 0.2 }, '<'); // '<'表示和上一个动画同时开始

    const handleLinkEnter = () => {
      document.body.classList.add('link-hover');
      linkHoverTimeline.play();
    };

    const handleLinkLeave = () => {
      document.body.classList.remove('link-hover');
      linkHoverTimeline.reverse();
    };

    const handleGlobalEnter = (e) => e.target.closest('a') && handleLinkEnter();
    const handleGlobalLeave = (e) => e.target.closest('a') && handleLinkLeave();

    document.addEventListener('pointerenter', handleGlobalEnter);
    document.addEventListener('pointerleave', handleGlobalLeave);

    return () => {
      document.removeEventListener('pointerenter', handleGlobalEnter);
      document.removeEventListener('pointerleave', handleGlobalLeave);
    };
  }, []);

  return (
    <>
      <div ref={cursorSm} className="cursor--sm"></div>
      <div ref={cursorLg} className="cursor--lg"></div>
    </>
  );
}

export default CustomCursor;

这种方式的好处是把基础样式放在CSS里，JS专注于动画逻辑和状态切换，代码更清晰易维护。

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