本文详解如何通过 JavaScript 和 CSS 实现精准控制的自定义光标：在目标区域内显示、移出时立即隐藏，并重点解决因光标元素遮挡导致 mouseleave 事件失效的问题。
本文详解如何通过 javascript 和 css 实现精准控制的自定义光标：在目标区域内显示、移出时立即隐藏，并重点解决因光标元素遮挡导致 `mouseleave` 事件失效的问题。
在实现自定义光标效果时，一个常见却容易被忽视的问题是：当动态创建的 元素作为光标跟随鼠标移动时，它会覆盖在目标容器（如 .box）之上，从而拦截鼠标事件——尤其是 mouseleave。这导致即使鼠标已离开 .box 区域，mouseleave 事件也无法触发，自定义光标因此“卡住不消失”。
根本原因在于：默认情况下，所有 HTML 元素（包括 ）都具有 pointer-events: auto，会捕获鼠标交互。因此，当光标图像覆盖在容器边界附近时，鼠标实际是“悬停在图片上”，而非容器外，mouseleave 自然不会触发。
✅ 正确解法是为自定义光标元素显式设置 pointer-events: none，使其完全透传鼠标事件，确保 .box 能准确感知鼠标的进出状态。
以下是优化后的完整实现代码：
const box = document.querySelector(".box");
const customCursor = document.createElement("img");
// 关键修复：禁用光标元素的鼠标事件响应
customCursor.style.pointerEvents = "none";
customCursor.style.width = "175px";
customCursor.style.height = "175px";
customCursor.style.position = "absolute";
customCursor.style.left = "0";
customCursor.style.top = "0";
customCursor.style.transform = "translate(-50%, -50%)"; // 更优雅的居中定位方式
customCursor.src = "https://picsum.photos/175";
customCursor.style.display = "none";
box.appendChild(customCursor);
box.addEventListener("mousemove", (e) => {
customCursor.style.display = "block";
// 使用 transform + centering 更稳定，避免因宽高未加载完成导致的计算偏差
customCursor.style.left = `${e.pageX}px`;
customCursor.style.top = `${e.pageY}px`;
});
box.addEventListener("mouseleave", () => {
customCursor.style.display = "none";
});
对应的 CSS 可保持不变，但建议补充一行增强健壮性：
.box {
cursor: none;
width: 100%;
padding: 5rem;
background-color: lightblue;
/* 确保容器层级高于其他可能干扰的元素 */
position: relative;
z-index: 10;
}
⚠️ 注意事项：
- 不要依赖 e.pageX/e.pageY 减去宽高一半的绝对定位：若图片尚未加载完成（naturalWidth/naturalHeight 为 0），会导致定位偏移；使用 transform: translate(-50%, -50%) + left/top = mouse position 更可靠。
- 避免将光标元素挂载到 ：应始终附加在目标容器内（如本例的 .box），否则 mouseleave 将无法正确触发（因为事件监听绑定在 .box 上）。
- 移动端兼容性提示：此方案基于 mousemove 和 mouseleave，适用于桌面端；如需支持触摸设备，需额外处理 touchmove 和 touchend 事件。
总结：pointer-events: none 是解决自定义光标“滞留不消失”问题的核心 CSS 属性。它让装饰性光标元素彻底退出事件流，使底层容器能真实反映鼠标状态——这是构建专业级交互体验不可或缺的基础实践。
