使用Vanilla JavaScript实现自定义图片鼠标指针失败，求纯JS方案

问题根源 #

你当前的代码有两个核心问题：

1. 动态创建的div没有设置宽高，默认是0x0的尺寸，鼠标永远不会触发这个元素的cursor属性。
2. 即便div有尺寸，若没处理层级和事件穿透，会遮挡页面其他交互元素。

纯JS解决方案（两种可选） #

方案1：直接给body设置光标样式（最简）

不需要额外创建div，直接通过JS给页面根元素设置自定义光标，同时加入图片加载失败的容错处理：

// 等待DOM完全加载后执行
document.addEventListener('DOMContentLoaded', () => {
  // 给body应用自定义光标
  document.body.style.cursor = 'url("/assets/images/cursor.png"), auto';

  // 验证光标图片是否能正常加载
  const cursorImg = new Image();
  cursorImg.src = '/assets/images/cursor.png';
  cursorImg.onerror = () => {
    console.error('自定义光标图片加载失败，切换为默认光标');
    document.body.style.cursor = 'auto';
  };
});

方案2：用全屏div实现（适合需要单独控制光标区域的场景）

如果必须通过创建div的方式实现，需要给div设置全屏尺寸、固定定位，同时关闭事件穿透避免遮挡页面交互：

document.addEventListener('DOMContentLoaded', () => {
  // 动态插入CSS样式（纯JS实现，不依赖外部CSS文件）
  const styleSheet = document.createElement('style');
  styleSheet.textContent = `
    .custom-cursor-layer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      pointer-events: none; /* 关键：让鼠标事件穿透到下层元素 */
      z-index: 9999; /* 确保div在最上层，光标生效 */
    }
  `;
  document.head.appendChild(styleSheet);

  // 创建全屏div并添加样式
  const cursorLayer = document.createElement('div');
  cursorLayer.classList.add('custom-cursor-layer');
  // 直接通过JS设置cursor属性，也可以在上面的style里定义
  cursorLayer.style.cursor = 'url("/assets/images/cursor.png"), auto';
  document.body.appendChild(cursorLayer);

  // 图片加载容错
  const cursorImg = new Image();
  cursorImg.src = '/assets/images/cursor.png';
  cursorImg.onerror = () => {
    console.error('自定义光标图片加载失败');
    cursorLayer.style.cursor = 'auto';
  };
});

关键注意事项 #

• 图片尺寸限制：大部分浏览器对自定义光标图片的尺寸有要求，建议控制在32x32px或64x64px以内，过大的图片会被浏览器忽略。
• 路径正确性：确认图片路径是相对HTML文件的正确路径，比如HTML在根目录时，路径应为./assets/images/cursor.png；如果是绝对路径要保证服务器上的文件存在。
• 事件穿透：使用全屏div时必须设置pointer-events: none，否则页面上的按钮、链接等可交互元素会无法点击。

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