鼠标悬停切换为图片光标：悬停事件触发异常问题排查

我想实现这样的效果：鼠标悬停在文本元素上时，光标切换为自定义图片；离开元素时恢复默认光标。但用React+常规CSS实现时出现异常：快速或斜向移入/移出容器时，图片光标会残留。目标效果参考woodwood.com的自定义光标表现。

React代码 #

const {useState, useEffect} = React;

function TextWithCursor() {
  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 })

  const handleMouseMove = event => {
    setCursorPosition({ x: event.clientX, y: event.clientY })
  }
  return (
    <div
      className="container"
      onMouseMove={handleMouseMove}
    >
      HELLO
      <img
        src="https://images.unsplash.com/photo-1608877906884-5ffef2ef9612?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&w=200&q=80"
        className="imageWithOpacity"
        alt="Custom cursor"
        style={{
          left: cursorPosition.x,
          top: cursorPosition.y,
        }}
      />
    </div>
  )
}

ReactDOM.render( <TextWithCursor />, document.getElementById('root') );

CSS代码 #

.container {
  border: 1px solid black;
  width: 200px;
  cursor: none;
}

.container:hover .imageWithOpacity {
  opacity: 1;
}

.imageWithOpacity {
  position: fixed;
  opacity: 0;
  height: auto;
  display: block;
}

异常效果 #

解决方案 #

问题根源：

• 仅依赖container:hover控制图片显隐，鼠标快速移出时，CSS hover状态切换与React鼠标事件不同步，导致图片残留
• 图片位置仅通过容器内的onMouseMove更新，鼠标移出后位置停留在最后一次触发的坐标，叠加opacity延迟出现残留

修改后代码 #

React代码

const {useState, useEffect} = React;

function TextWithCursor() {
  const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
  const [showCustomCursor, setShowCustomCursor] = useState(false);

  // 全局监听鼠标移动，确保光标位置实时更新
  useEffect(() => {
    const handleGlobalMouseMove = (event) => {
      setCursorPosition({ x: event.clientX, y: event.clientY });
    };

    window.addEventListener('mousemove', handleGlobalMouseMove);
    return () => window.removeEventListener('mousemove', handleGlobalMouseMove);
  }, []);

  return (
    <div
      className="container"
      onMouseEnter={() => setShowCustomCursor(true)}
      onMouseLeave={() => setShowCustomCursor(false)}
    >
      HELLO
      <img
        src="https://images.unsplash.com/photo-1608877906884-5ffef2ef9612?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&w=200&q=80"
        className={`imageWithOpacity ${showCustomCursor ? 'visible' : ''}`}
        alt="Custom cursor"
        style={{
          left: cursorPosition.x,
          top: cursorPosition.y,
        }}
      />
    </div>
  );
}

ReactDOM.render(<TextWithCursor />, document.getElementById('root'));

CSS代码

.container {
  border: 1px solid black;
  width: 200px;
  cursor: none;
}

.imageWithOpacity {
  position: fixed;
  opacity: 0;
  height: auto;
  display: block;
  transition: opacity 0.1s ease;
  pointer-events: none; /* 避免图片干扰容器的鼠标事件 */
}

.imageWithOpacity.visible {
  opacity: 1;
}

关键优化点 #

• 用React状态showCustomCursor精准控制光标显隐，替代不可靠的CSS hover
• 全局监听鼠标移动，确保光标位置始终跟随鼠标，避免快速移动时错位
• 添加pointer-events: none防止自定义光标遮挡容器的鼠标事件，避免进出判断失效
• 加入过渡动画让光标显隐更自然，减少视觉突兀感

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