鼠标指针跟随文本消失，无Y轴偏移情况下如何修复该问题

你遇到的问题本质是跟随元素放在鼠标坐标位置时，自身捕获了鼠标事件，导致绑定在下层元素的mousemove事件触发中断，最终文本消失，添加Y轴偏移本质是让元素避开了鼠标指针的碰撞范围，所以能正常显示。

解决思路 #

• 禁用跟随元素的鼠标交互
  给跟随元素添加CSS属性pointer-events: none，该属性会让元素完全不响应任何鼠标操作，不会干扰下层元素的事件触发，是实现鼠标跟随类效果的标配属性，不需要调整坐标偏移即可正常工作。
• 校验元素基础样式配置
  • 确认跟随元素的定位属性为position: absolute（相对于文档流定位）或position: fixed（相对于视口定位），不可使用默认的static定位
  • 清除元素默认自带的边距：添加margin: 0; padding: 0;，避免p、div等标签的默认边距导致元素实际位置偏移
  • 配置足够高的z-index值，保证跟随元素不会被其他页面元素遮挡
• 调整事件绑定逻辑
  将mousemove事件绑定到document或window对象上，不要绑定到局部容器，确保鼠标在页面任意位置移动都能触发位置更新逻辑。
• 适配滚动场景
  如果页面存在滚动行为，可改用e.clientX/e.clientY搭配position: fixed定位，坐标计算更稳定，不会受页面滚动距离影响。

之前更换div、p、span标签无法解决问题，是因为标签类型不影响鼠标事件的捕获逻辑，只要没有关闭pointer-events，元素只要覆盖在鼠标指针位置就会触发事件冲突。

参考实现代码 #

CSS部分 #

#follower {
  position: absolute;
  pointer-events: none;
  margin: 0;
  padding: 0;
  z-index: 9999;
  /* 以下为自定义样式可自行修改 */
  font-size: 14px;
  color: #000;
}

JS部分 #

function motion(e) {
  const follower = document.getElementById('follower');
  follower.style.left = e.pageX + 'px';
  follower.style.top = e.pageY + 'px';
}
document.addEventListener('mousemove', motion);

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