如何让自定义跟随光标悬停菜单文本时匹配其尺寸与固定位置

安全阿岳

2026-10-12

问题排查

你的代码存在4个核心问题导致效果不达标：

悬停回调中只配置了top属性，未配置left属性，光标水平位置错误
全局mousemove事件没有做状态拦截，悬停时仍然会持续改写光标位置，导致固定位置失效
页面初始化时就提前读取了文本元素的尺寸和位置，后续如果页面缩放、布局变动，缓存的数值会过期
文本元素的offsetLeft/offsetTop是相对于其父级定位元素的偏移，和直接挂在body下的光标元素定位基准不一致，直接赋值会出现位置偏差

修复代码

JS 逻辑修改

let cursor = document.querySelector('.cursorFollower');
let button = document.querySelector('.superText');
// 新增悬停状态标记，用于控制光标跟随逻辑是否生效
let isHover = false;

document.addEventListener('mousemove',(e)=>{
  // 悬停状态下跳过光标跟随逻辑
  if(isHover) return
  cursor.style.left = e.pageX - 10 + 'px';
  cursor.style.top = e.pageY - 10 + 'px';   
});

button.onmouseover = function(){
  isHover = true
  button.style.color = "#84C4B5";
  cursor.style.transform = 'rotate(0deg)';
  // 悬停时实时读取元素的尺寸、坐标，自动适配布局变动
  const btnRect = button.getBoundingClientRect()
  cursor.style.width = `${btnRect.width}px`;
  cursor.style.height = `${btnRect.height}px`;
  // 兼容页面滚动场景，计算绝对定位的准确坐标
  cursor.style.top = `${btnRect.top + window.scrollY}px`;
  cursor.style.left = `${btnRect.left + window.scrollX}px`;
};

button.onmouseout = function(){
  isHover = false
  button.style.color = "white";
  cursor.style.transform = 'rotate(45deg)';
  cursor.style.width = '20px';
  cursor.style.height = '20px';
};