如何自动将自定义SVG光标替换hover时的指针类光标

我通过html { cursor: none; }隐藏了页面默认鼠标，使用自定义SVG结合mousemove事件的translate属性实现了自定义光标定位，但按钮、文本输入框等元素hover时仍会显示pointer、text等默认光标。希望能自动检测目标元素的光标样式变化，将其替换为对应的自定义SVG光标，不要手动给元素添加类的方式。

以下是完整的自动实现方案：

完整实现代码 #

HTML #

<!-- 自定义光标容器 -->
<div class="custom-cursor">
  <!-- 默认光标SVG -->
  <svg class="cursor-default" width="24" height="24" viewBox="0 0 24 24">
    <path d="M12,11.5A2.5,2.5 0 0,1 9.5,9A2.5,2.5 0 0,1 12,6.5A2.5,2.5 0 0,1 14.5,9A2.5,2.5 0 0,1 12,11.5M12,2A7,7 0 0,0 5,9C5,14.25 12,22 12,22C12,22 19,14.25 19,9A7,7 0 0,0 12 ,2Z"></path>
  </svg>
  <!-- Pointer光标SVG -->
  <svg class="cursor-pointer" width="24" height="24" viewBox="0 0 24 24" style="display: none;">
    <path d="M14,9V4H12V9H7V11H12V16H14V11H19V9H14Z"></path>
  </svg>
  <!-- Text光标SVG -->
  <svg class="cursor-text" width="24" height="24" viewBox="0 0 24 24" style="display: none;">
    <path d="M5,3H19C20.1,3 21,3.9 21,5V19C21,20.1 20.1,21 19,21H5C3.89,21 3,20.1 3,19V5C3,3.9 3.9,3 5,3M5,7H19V19H5V7Z"></path>
  </svg>
</div>

<a href="#" class="btn">Call to action</a>
<input type="text" placeholder="输入文本测试text光标" style="padding: 8px; margin-left: 20px;">

CSS #

/* 全局强制隐藏所有元素的默认光标 */
* {
  cursor: none !important;
}

.custom-cursor {
  width: 50px;
  height: 50px;
  position: fixed;
  left: -8px;
  top: -6px;
  pointer-events: none; /* 确保光标不阻挡元素交互 */
  z-index: 9999;
}

.custom-cursor svg {
  width: 24px;
  height: 24px;
  fill: #333;
}

/* 页面基础样式 */
body {
  min-height: 100vh;
  font-family: Roboto, Arial;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #F5F9FF;
}

.btn {
  --background: #5628EE;
  --shadow: rgba(84, 40, 238, .16);
  --y: 0;
  display: table;
  text-align: center;
  padding: 12px 24px;
  border-radius: 4px;
  color: #fff;
  background: var(--background);
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 23px;
  backface-visibility: hidden;
  box-shadow: 0 4px 12px var(--shadow);
  transform: translateY(var(--y));
  transition: box-shadow .3s ease, transform .3s ease;
}

.btn:hover {
  --y: -2px;
  box-shadow: 0 8px 16px var(--shadow);
}

.btn:active {
  --y: 1px;
  box-shadow: 0 4px 8px var(--shadow);
}

JavaScript #

const customCursor = document.querySelector('.custom-cursor');
const cursorSvgMap = {
  'default': document.querySelector('.cursor-default'),
  'pointer': document.querySelector('.cursor-pointer'),
  'text': document.querySelector('.cursor-text')
};

// 显示指定类型的光标，隐藏其他
function showCursorType(type = 'default') {
  Object.values(cursorSvgMap).forEach(svg => svg.style.display = 'none');
  if (cursorSvgMap[type]) {
    cursorSvgMap[type].style.display = 'block';
  } else {
    cursorSvgMap['default'].style.display = 'block';
  }
}

// 监听鼠标移动，更新光标位置
document.addEventListener('mousemove', (e) => {
  customCursor.style.transform = `translate(${e.pageX}px, ${e.pageY}px)`;
});

// 监听鼠标进入元素，检测光标样式并切换自定义光标
document.addEventListener('mouseover', (e) => {
  const computedCursor = getComputedStyle(e.target).cursor;
  // 匹配常见光标类型，可根据需求扩展
  const cursorType = computedCursor.split('-')[0]; // 处理如'pointer'、'text'、'default'等
  showCursorType(cursorType);
});

// 鼠标离开页面时恢复默认光标
document.addEventListener('mouseout', () => {
  showCursorType('default');
});

关键实现点说明 #

• 全局隐藏默认光标：用* { cursor: none !important; }强制所有元素的默认光标隐藏，从根源避免hover时默认光标出现。
• 光标类型映射：提前定义不同光标类型对应的SVG，通过showCursorType函数切换显示。
• 自动检测光标样式：通过mouseover事件获取目标元素的computedStyle.cursor，根据值自动切换自定义SVG。
• 光标交互不阻挡：给自定义光标容器添加pointer-events: none，确保不会干扰页面元素的正常交互。

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