作品集网站自定义圆形鼠标光标悬停缩放功能修复求助
2026-7-10
问题根源
嵌套结构下，鼠标事件目标易被父元素拦截，JS的hover状态判断未正确识别嵌套；同时自定义光标未配置过渡属性，导致缩放无平滑效果。
修复步骤
1. 配置光标过渡样式
给自定义光标添加过渡属性，确保缩放状态切换有0.1s平滑效果：
.custom-cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background: #fff; mix-blend-mode: difference; pointer-events: none; z-index: 9999; /* 新增过渡配置 */ transition: transform 0.1s ease; } .custom-cursor.hover { transform: scale(2); }
2. 修正JS事件判断逻辑
调整事件监听逻辑，确保能识别所有嵌套的标签：
const cursor = document.querySelector('.custom-cursor'); // 监听鼠标进入可交互元素 document.addEventListener('mouseover', (e) => { // 直接判断目标或父级是否为<a> if (e.target.tagName === 'A' || e.target.closest('a')) { cursor.classList.add('hover'); } }); // 监听鼠标离开可交互元素 document.addEventListener('mouseout', (e) => { // 确保离开的是<a>区域，且未进入同个<a>的子元素 if ((e.target.tagName === 'A' || e.target.closest('a')) && !e.relatedTarget?.closest('a')) { cursor.classList.remove('hover'); } }); // 光标跟随逻辑 document.addEventListener('mousemove', (e) => { cursor.style.left = `${e.clientX - 10}px`; cursor.style.top = `${e.clientY - 10}px`; });
3. 排除父元素事件干扰
确保父
不拦截鼠标事件：
.parent-div { pointer-events: auto; /* 移除可能的事件阻止设置 */ }
关键说明
- 用
closest('a')可以穿透嵌套结构，精准识别所有标签 - 过渡属性直接绑定在光标元素上，保证缩放效果的平滑性
mouseout中判断relatedTarget，避免光标在内部子元素间移动时误触发离开状态
内容的提问来源于stack exchange，提问作者David M.
相关产品推荐
相关产品推荐
