自定义箭头光标位置偏移及越界问题求助

问题原因分析 #

1. 光标偏移：原代码用clientX/clientY结合position: absolute定位光标，但WordPress页面存在多层嵌套的定位父元素（如相对定位容器），导致光标定位基准错误；同时未考虑自定义光标自身尺寸的偏移，箭头尖端无法对准鼠标位置。
2. 光标超出范围：未限制光标仅在菜单图片容器内显示，鼠标移出菜单区域时光标仍会出现。

解决方案代码 #

1. 调整光标CSS定位 #

确保.arrow-cursor使用fixed定位，基于视口计算位置，避免父元素定位干扰：

.arrow-cursor {
  position: fixed;
  pointer-events: none; /* 避免干扰原鼠标事件触发 */
  /* 补充你的光标样式：宽高、背景图、z-index等 */
}

2. 修改JavaScript代码修复偏移与范围限制 #

// 等待DOM完全加载后执行，适配WordPress动态页面结构
document.addEventListener('DOMContentLoaded', function() {
  var swiper = new Swiper('.swiper-container', {
    slidesPerView: 1,
    loop: true,
    speed: 0,
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },
  });

  let cursor = document.querySelector('.arrow-cursor');
  const menuContainer = document.querySelector('.swiper-container');
  // 根据光标实际尺寸设置偏移量（比如光标宽24px则减12，让尖端对准鼠标）
  const cursorOffsetX = 12;
  const cursorOffsetY = 12;

  function moveCursor(e) {
    const containerRect = menuContainer.getBoundingClientRect();
    // 判断鼠标是否在菜单容器范围内
    const isInContainer = e.clientX >= containerRect.left && 
                         e.clientX <= containerRect.right && 
                         e.clientY >= containerRect.top && 
                         e.clientY <= containerRect.bottom;

    if (!isInContainer) {
      // 移出容器时隐藏光标
      cursor.classList.remove('active', 'cursor-prev', 'cursor-next');
      return;
    }

    // 计算光标位置，减去偏移量让箭头尖端精准对准鼠标
    let x = e.clientX - cursorOffsetX;
    let y = e.clientY - cursorOffsetY;

    cursor.style.left = `${x}px`;
    cursor.style.top = `${y}px`;
  }

  document.addEventListener('mousemove', moveCursor);

  let links = Array.from(document.querySelectorAll('.swiper-button-ctrl'));
  links.forEach((link) => {
    link.addEventListener('mouseover', () => {
      cursor.classList.add('active');
      if (link.classList.contains('swiper-button-prev')) {
        cursor.classList.remove('cursor-next');
        cursor.classList.add('cursor-prev');
      } else if (link.classList.contains('swiper-button-next')) {
        cursor.classList.remove('cursor-prev');
        cursor.classList.add('cursor-next');
      }
    });
    link.addEventListener('mouseleave', () => {
      cursor.classList.remove('active', 'cursor-prev', 'cursor-next');
    });
  });
});

关键修复点说明 #

• 用DOMContentLoaded确保DOM完全加载后初始化代码，适配WordPress动态页面结构。
• 切换光标为fixed定位，直接基于视口计算位置，彻底避免父元素定位干扰。
• 添加光标偏移量调整，根据自定义光标的实际尺寸设置，让箭头尖端精准对准鼠标位置。
• 在mousemove事件中判断鼠标是否在菜单容器内，移出时自动隐藏光标，解决超出范围问题。

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