"cursor: none;" 悬停链接上的光标手不会消失

Question

我尝试使用自己的光标仅将鼠标悬停在链接上。这就是为什么我不在整个body上设置cursor: none的原因。我正试图通过 JS 摆脱手。在检查器中，body 光标说它是 cursor: none，但手仍然显示在我的光标

上

link.addEventListener("mouseover", () => {
    mouseCursor.classList.add("cursorHov");
    document.body.style.cursor = 'none';
});

Answer 1

在 document.body 上更改 cursor 属性不会在它悬停在使用不同光标的其他对象上时更改它。

不要为此使用 JavaScript，请使用 CSS 的 :hover pseudo-class:

.selector-for-your-link:hover {
    /* CSS for your cursor (whatever you currently have for your `.cursorHov` class) */
}

Answer 2

实际上，您甚至不需要 JavaScript。您可以在 CSS 中完成。像这样：

.link:hover {
    cursor: none;
}

对于HTML：

<a href="whateverhref.com" class="link">Try hovering over this!</a>

现在，您只需要创建 links，如果您希望它们没有光标，则给它一个 link 的 class。当然，您可以更改 class 名称。另外，请注意 whateverhref.com 并不是您真正想去的地方，它只是一个占位符。

Cursor hand on hovered links don't disappear with "cursor: none;"