本文详解如何通过 mouseenter 和 mouseleave 事件精准控制自定义光标在指定区域（如图片容器）内的缩放效果，修复因误用 MouseEvent 导致的事件监听失效问题，并提供可立即运行的完整代码示例。
本文详解如何通过 `mouseenter` 和 `mouseleave` 事件精准控制自定义光标在指定区域（如图片容器）内的缩放效果，修复因误用 `mouseevent` 导致的事件监听失效问题，并提供可立即运行的完整代码示例。
实现自定义光标的区域化缩放效果，关键在于正确绑定交互事件并管理状态切换。原代码中使用了不存在的 'MouseEvent' 字符串作为事件类型，这是导致逻辑完全不触发的根本原因——浏览器无法识别该事件名，因此监听器从未被调用。
正确的做法是使用语义明确的 mouseenter（进入目标元素时触发）和 mouseleave（完全移出时触发）事件。二者配合可形成“进入放大 → 离开复位”的闭环控制：
<div class="cursor"></div> <!-- 必须存在 DOM 元素，否则 querySelector 返回 null -->
<script>
const cursor = document.querySelector('.cursor');
document.addEventListener('mousemove', (e) => {
cursor.style.left = `${e.pageX}px`;
cursor.style.top = `${e.pageY}px`;
});
</script>
<section class="cursorHover" style="background: #f0f9ff; padding: 2rem;">
<img loading="lazy" src="imgs/im/Vector.png" alt="hover target" class="img mt-4" />
</section>
<script>
const hoverSection = document.querySelector('.cursorHover');
hoverSection.addEventListener('mouseenter', () => {
cursor.style.transform = 'translate(-50%, -50%) scale(6)';
});
hoverSection.addEventListener('mouseleave', () => {
cursor.style.transform = 'translate(-50%, -50%) scale(0.9)';
});
</script>
<style>
.cursor {
position: absolute;
background: white;
width: 20px;
height: 20px;
border-radius: 50%;
user-select: none;
pointer-events: none;
mix-blend-mode: difference;
transform: translate(-50%, -50%) scale(0.9);
z-index: 9999;
transition: transform 0.2s ease; /* 推荐添加平滑过渡 */
}
</style>⚠️ 注意事项：
- DOM 元素必须提前存在：.cursor <div> 需在脚本执行前已渲染，否则 querySelector 返回 null，后续操作报错；
- 避免内联样式覆盖：若 .cursor 在 CSS 中已定义 transform，直接赋值 element.style.transform = 'scale(6)' 会忽略 translate(-50%, -50%)，务必合并写全；
- 启用 CSS 过渡提升体验：添加 transition: transform 0.2s ease 可使缩放更自然；
- 事件选择原则：mouseenter/mouseleave 不冒泡且仅响应直接子区域，比 mouseover/mouseout 更精准，适合区域级光标控制。
通过以上调整，即可实现鼠标悬停于 .cursorHover 区域时，自定义光标平滑放大至 6 倍，移出后恢复默认尺寸，兼顾功能性与视觉流畅性。
