如何实现无闪烁的CSS自定义光标并保留按钮交互功能？

问题根源 #

首次悬停按钮时，浏览器会重新解析button:hover的cursor属性，若光标资源未提前缓存，会短暂 fallback 到默认样式，引发闪烁。

可行解决方案 #

1. 预加载光标资源

用JavaScript提前加载光标图片，确保hover触发时资源已在本地缓存：

// 预加载自定义光标
const cursorPreload = new Image();
cursorPreload.src = '../assets/cursor_arrow.png';

CSS保持原有设置即可：

html, button:hover {
    cursor: url('../assets/cursor_arrow.png'), auto;
}

2. 全局强制继承光标样式

通过CSS通配符让所有元素继承根节点的光标样式，直接覆盖浏览器默认的按钮hover光标：

* {
    cursor: inherit !important;
}

html {
    cursor: url('../assets/cursor_arrow.png'), auto;
}

这种方法无需单独处理按钮，所有元素都会统一使用自定义光标，彻底规避闪烁问题。

3. 伪元素隔离光标触发（适配特殊场景）

如果不想全局修改样式，可以给按钮添加无交互的伪元素覆盖，既保留按钮点击功能，又避免触发默认光标：

button {
    position: relative;
    /* 保留按钮原有样式 */
}

button::after {
    content: '';
    position: absolute;
    inset: 0; /* 等价于top/left/right/bottom: 0 */
    pointer-events: none;
}

同时保留根节点的光标设置：

html {
    cursor: url('../assets/cursor_arrow.png'), auto;
}

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