自定义光标在指定图片区域无法缩放的问题求助

问题描述 #

我希望实现自定义光标在包含图片的.cursorHover section区域内改变大小的效果，但当前编写的代码无法生效，不清楚问题出在哪里。

原代码 #

<script>
        var cursor = document.querySelector('.cursor');
        document.addEventListener('mousemove', (e) => {
            cursor.style.left = e.pageX + 'px';
            cursor.style.top = e.pageY + 'px';

        });
</script>


<section class="cursorHover">
     <img loading="lazy" src="imgs/im/Vector.png" class="img mt-4" />
</section>

<script>
      var cursor3 = document.querySelector('.cursorHover');

      cursor3.addEventListener('MouseEvent', () => {
            var element = document.querySelector('.cursor');
            element.style.transform = 'scale(6)';
      });

</script>

<style>
.cursor {
        position: absolute;
        background: white;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        user-select: none;
        pointer-events: none;
        mix-blend-mode: difference;
        transform: translate(-50%, -50%) scale(0.9);
        z-index: 9999;
    }
</style>

问题分析与修复 #

你的代码有三个关键问题导致效果失效，对应修复方案如下：

1. 修正事件类型 #

你使用的MouseEvent不是有效的事件名称，要实现光标进入区域放大、离开恢复的效果，需要监听mouseenter和mouseleave两个具体事件。

2. 保留Transform位移属性 #

原光标样式中的translate(-50%, -50%)是让光标中心对齐鼠标指针的关键，直接设置scale(6)会覆盖这个位移，导致光标偏离鼠标位置。修改时必须同时保留位移和缩放属性。

3. 确保目标区域能捕获鼠标事件 #

如果.cursorHover仅靠内部图片撑出尺寸，图片外的空白区域可能无法触发事件。给section添加基础尺寸样式，确保整个区域都能响应鼠标操作。

修复后的完整代码 #

<!-- 提前添加光标元素，确保DOM加载时能被找到 -->
<div class="cursor"></div>

<section class="cursorHover">
     <img loading="lazy" src="imgs/im/Vector.png" class="img mt-4" />
</section>

<style>
.cursor {
        position: absolute;
        background: white;
        width: 20px;
        height: 20px;
        border-radius: 100%;
        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; /* 添加平滑过渡动画 */
    }

.cursorHover {
        min-height: 100px; /* 确保section有足够高度触发事件 */
        padding: 10px;
        /* 可选：添加边框方便查看区域范围 */
        /* border: 1px solid #ccc; */
    }
</style>

<script>
const cursor = document.querySelector('.cursor');

// 光标跟随逻辑
document.addEventListener('mousemove', (e) => {
    cursor.style.left = e.pageX + 'px';
    cursor.style.top = e.pageY + 'px';
});

// 光标缩放逻辑
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>

额外优化说明 #

• 给光标添加transition属性，让缩放效果更平滑自然。
• 将光标元素提前到HTML开头，避免DOM未加载完成时querySelector找不到元素的问题。
• 给.cursorHover设置最小高度和内边距，确保区域稳定捕获鼠标事件。

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