解决自定义圆形光标悬停可点击元素时异常收缩的问题

你的问题出在JavaScript的for循环里——你在循环内部加了break，这导致代码只检查第一个可点击元素，完全忽略了后面的所有元素。只要鼠标不在第一个可点击元素上，哪怕悬停在其他按钮或链接上，isHover都会被判定为false，光标就会意外缩小。

修复方法 #

方法1：优化循环逻辑 #

移除无效的全局break，找到hover元素后再终止循环，确保遍历所有可点击元素：

function updateCursor(e) {
    cursor.style.left = `${e.clientX}px`;
    cursor.style.top = `${e.clientY}px`;

    let isHover = false;
    for (let index = 0; index < clickableElements.length; index++) {
        if (clickableElements[index].matches(':hover')) {
            isHover = true;
            break; // 找到匹配元素后提前终止循环，优化性能
        }
    }

    if (isHover) {
        cursor.classList.add('expand-circle');
    } else {
        cursor.classList.remove('expand-circle');
    }
}

方法2：用Array.some()简化代码 #

更简洁高效的写法是利用Array.some()，它会自动遍历数组直到找到第一个满足条件的元素，直接返回布尔值：

function updateCursor(e) {
    cursor.style.left = `${e.clientX}px`;
    cursor.style.top = `${e.clientY}px`;

    const isHover = clickableElements.some(el => el.matches(':hover'));
    
    cursor.classList.toggle('expand-circle', isHover);
}

classList.toggle()的第二个参数可以精准控制类的添加/移除，完美适配这种场景。

完整优化后的代码 #

HTML #

<div id="custom-cursor"></div>
<div class="container">
    <button>This is a clickable element</button>
    <a href="#">This is another clickable element</a>
    <!-- 其他文本内容 -->
</div>

CSS #

* {
    cursor: none;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
}

#custom-cursor {
    background-color: transparent;
    border: 1px solid red;
    height: 20px;
    width: 20px;
    border-radius: 50%;
    position: fixed;
    z-index: 9999; /* 确保光标在最上层不被遮挡 */
    will-change: transform;
    transition: transform .3s ease-in;
    pointer-events: none; /* 避免自定义光标干扰真实鼠标事件 */
}

#custom-cursor.expand-circle {
    transform: scale(1.75);
}

额外添加了pointer-events: none防止光标元素拦截鼠标事件，同时提高z-index确保显示层级。

JavaScript #

const cursor = document.querySelector('#custom-cursor');
const clickableElements = Array.from(document.querySelectorAll('a, button'));
document.addEventListener('mousemove', updateCursor);
window.addEventListener('scroll', updateCursor);

function updateCursor(e) {
    // 修正光标位置：让圆形中心对齐鼠标指针
    cursor.style.left = `${e.clientX - 10}px`;
    cursor.style.top = `${e.clientY - 10}px`;

    const isHover = clickableElements.some(el => el.matches(':hover'));
    
    cursor.classList.toggle('expand-circle', isHover);
}

这里还修正了光标位置——原代码中光标左上角对齐鼠标，减去10px后，圆形中心会和鼠标指针对齐，视觉上更自然。

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