CSS自定义图片光标hover状态失效问题求助

目标 #

• 为所有元素（使用*选择器）设置自定义CSS图片光标
• 为特定元素的hover状态应用另一张自定义图片光标
• 使用系统内置光标时功能正常，但换成自定义图片光标后，hover状态的光标不生效
• 示例代码在孤立环境中可正常运行，但在项目里，鼠标悬停在.hover类元素上时，仍显示全局的红色光标
• 调试器计算值显示hover时应该用蓝色光标，但视觉上还是红色

示例1：非图片自定义光标（正常工作 ✅） #

* {
    cursor: default;
}

.hover:hover {
    cursor: progress;
}

<a href="https://google.com">Link 1</a>
<a href="https://google.com">Link 2</a>
<a href="https://google.com" class="hover">Link 3</a>

示例2：自定义图片光标（孤立环境正常，项目中失效 ❌） #

* {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADYSURBVHgBtZaNDYIwEIWfTIAb6CSOoJvQDWATXcEJGjdwg7JB3eC8M6dBQkqrvS95DZTwXn9IDyABAS2rZ3lWYJEqal/H2qEUeUkNKFPn7CAdVSwwn87KrZn3PxjP1adGTpXkltY8Ur2A+LUnfHOpaP6WF++NJgXYsG24OcEOJwFH2HGQJYp80cKGUQIIhjQwRgJG2PGwDrhLwA12XGWT5QuKsGH/agvP/uwa8YkxP+w0xFUMWC48/GCoYD4ghc7EpmTO9qSkRnj64++iU4PprIL2DbRyUD4BpR/d+UxAbB8AAAAASUVORK5CYII=), auto;
}

.hover:hover {
    cursor: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAADUSURBVHgBtZaNDcIgEIUfnaBuoJM4gm5SNoBN7ApOQNzADegGuAHyc5raWBTlvuS1CUnfg15zV6CI74NUkAmyQZ7kaG0I2qKe+FAy8F/qVBGUduUqzOenkp/M1Q/GS6nSzn0jyXfv3KFdgFvUxI8NzR8y0VlQkgUPmy5cjuBDxoAD+NiLXBD04GESuSB8dGAmBkzg48YdcI0BF/BxFrnnw4GHHd2ren/FjHjC3uxSiGwYsDZ4vG5grlEmnYRrZL7UZKwwN/jj72Igg/mpLK1p+sxXuQO28d358+kFewAAAABJRU5ErkJggg==), auto;
}

<a href="https://google.com">Link 1</a>
<a href="https://google.com">Link 2</a>
<a href="https://google.com" class="hover">Link 3</a>

备注 #

不想给*选择器加hover状态，否则页面任意位置光标都会永久处于hover状态

可能原因及修复方法 #

1. 图片光标尺寸限制 #

浏览器对自定义光标图片的尺寸有严格限制（通常最大为32x32像素，部分浏览器支持更大尺寸但需明确声明）。如果hover光标图片尺寸超出限制，浏览器会静默 fallback 到全局光标。

修复：
确保光标图片尺寸符合浏览器要求，或者在url()后明确指定光标热点坐标与尺寸：

.hover:hover {
    cursor: url(data:image/png;base64,...) 16 16, auto;
    /* 16 16 为光标热点坐标，可根据实际调整 */
}

2. 子元素覆盖 #

*选择器会作用于.hover元素的所有子元素，导致子元素的全局光标覆盖父元素的hover光标。

修复：
为.hover及其所有子元素统一设置hover光标：

.hover:hover,
.hover:hover * {
    cursor: url(data:image/png;base64,...), auto;
}

3. 资源加载或缓存问题 #

浏览器可能缓存了旧的光标资源，或者base64编码有误导致图片加载失败。

修复：

• 将hover光标的base64编码复制到浏览器地址栏，验证是否能正常显示蓝色图片
• 清除浏览器缓存，或在url后添加版本标识（如?v=1）强制刷新资源

4. CSS优先级冲突 #

即使调试器显示计算值正确，也可能存在更高优先级的规则（如内联样式、!important）覆盖hover光标。

修复：
提升hover规则的优先级，例如：

a.hover:hover {
    cursor: url(...), auto !important;
}

（优先通过优化选择器权重解决，尽量避免滥用!important）

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