固定定位自定义光标遮挡元素，hover事件失效如何解决？

这问题十有八九是你的自定义光标div把h2给挡住了——因为fixed定位的元素默认层级较高，鼠标实际是悬停在光标div上，根本没触发h2的hover事件。

核心解决方案 #

给你的自定义光标div添加以下CSS属性：

pointer-events: none;

这个属性会让元素完全不接收任何鼠标事件，鼠标操作会直接穿透到它下方的元素，这样h2就能正常触发hover逻辑了。

特殊情况处理 #

如果你的自定义光标里包含需要交互的子元素（比如点击按钮），只需给这些子元素单独设置：

pointer-events: auto;

就能让子元素正常响应鼠标事件，同时不影响整体的事件穿透效果。

完整代码示例 #

<h2 id="hoverText">悬停我试试</h2>
<div id="customCursor"></div>

#customCursor {
  position: fixed;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #ff4444;
  pointer-events: none; /* 关键属性 */
  z-index: 9999;
}

#hoverText:hover {
  color: #2196f3;
  cursor: none; /* 隐藏默认光标，配合自定义光标使用 */
}

const cursor = document.getElementById('customCursor');
const hoverText = document.getElementById('hoverText');

// 自定义光标跟随逻辑
document.addEventListener('mousemove', (e) => {
  cursor.style.left = `${e.clientX - 10}px`;
  cursor.style.top = `${e.clientY - 10}px`;
});

// 现在JS监听的hover事件也能正常触发了
hoverText.addEventListener('mouseover', () => {
  hoverText.textContent = '悬停成功！';
});

hoverText.addEventListener('mouseout', () => {
  hoverText.textContent = '悬停我试试';
});

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