自定义光标适配问题：视频hover时三角形与环形文本偏移修复请求

问题根源 #

鼠标悬浮在video元素上时光标偏移，核心原因是你当前的光标位置计算仅基于视口坐标（clientX/clientY），没有考虑video元素可能存在的定位上下文变化、transform缩放，或者元素自身相对于视口的偏移量，导致坐标计算与实际鼠标位置脱节。

具体修复步骤 #

1. 修正鼠标坐标计算逻辑 #

替换原有的视口直接取值方式，改为基于目标元素的视口偏移量计算精准坐标：

document.addEventListener('mousemove', (e) => {
  // 获取当前鼠标指向元素的视口位置信息
  const targetRect = e.target.getBoundingClientRect();
  // 计算鼠标相对于元素内部的坐标
  const relativeX = e.clientX - targetRect.left;
  const relativeY = e.clientY - targetRect.top;
  // 转换回全局视口坐标（适配fixed定位的光标）
  const finalX = targetRect.left + relativeX;
  const finalY = targetRect.top + relativeY;

  // 更新光标元素位置
  const triangle = document.getElementById('triangle');
  const circle = document.getElementById('circle');
  triangle.style.left = `${finalX}px`;
  triangle.style.top = `${finalY}px`;
  circle.style.left = `${finalX}px`;
  circle.style.top = `${finalY}px`;
});

2. 统一光标元素的定位上下文 #

确保光标元素使用fixed定位，彻底脱离父元素的定位影响：

#triangle, #circle {
  position: fixed;
  pointer-events: none; /* 避免光标遮挡鼠标事件触发 */
  /* 保留原有的形状、动画等样式 */
}

3. 处理Video元素的transform缩放场景 #

如果video元素应用了transform（比如缩放、平移），需要通过变换矩阵校正坐标：

document.addEventListener('mousemove', (e) => {
  const target = e.target;
  if (!target.matches('.box1, .box2')) return; // 仅跟踪目标元素

  const rect = target.getBoundingClientRect();
  const transformStyle = window.getComputedStyle(target).transform;
  // 解析元素的变换矩阵
  const transformMatrix = new DOMMatrix(transformStyle || 'none');
  // 计算鼠标在元素内的原始坐标
  const localX = e.clientX - rect.left;
  const localY = e.clientY - rect.top;
  // 应用逆变换，还原未缩放前的坐标
  const correctedPoint = transformMatrix.inverse().transformPoint(new DOMPoint(localX, localY));
  // 转换为全局视口坐标
  const finalX = rect.left + correctedPoint.x;
  const finalY = rect.top + correctedPoint.y;

  // 更新光标位置
  const triangle = document.getElementById('triangle');
  const circle = document.getElementById('circle');
  triangle.style.left = `${finalX}px`;
  triangle.style.top = `${finalY}px`;
  circle.style.left = `${finalX}px`;
  circle.style.top = `${finalY}px`;
});

4. 优化事件触发范围 #

通过事件匹配限制仅跟踪目标元素，避免无关元素触发错误计算：

document.addEventListener('mousemove', (e) => {
  // 只对.box1和.box2元素进行光标定位
  if (!e.target.matches('.box1, .box2')) return;
  // 后续坐标计算逻辑同上
});

测试验证点 #

• 调整屏幕尺寸后，检查video元素上的光标是否与鼠标指针完全重合
• 测试video元素添加缩放、平移等transform属性后的光标定位准确性
• 确保光标不会拦截鼠标事件（依赖pointer-events: none）

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