CSS自定义光标不生效求助：设置后光标无变化

先看你代码里最明显的问题：

• 你写的选择器是body2，但HTML里没有这个标签。如果是要给整个页面设置光标，应该用body标签选择器；如果是自定义类，要写成.body2（注意前面的点），同时HTML里对应的元素要加class="body2"属性。

接下来按以下步骤逐一排查：

1. 修正选择器
   把代码改成针对正确的元素：

   /* 给整个页面设置光标 */
   body { 
     cursor: url("assets/img/wiiu/Smile_icon_32x32.png"), url("assets/img/wiiu/cursor.svg"), auto; 
   }
   /* 或者针对某个类 */
   .custom-cursor { 
     cursor: url("assets/img/wiiu/Smile_icon_32x32.png"), url("assets/img/wiiu/cursor.svg"), auto; 
   }
   

2. 验证文件路径
   检查图片路径是否正确：

   • 假设你的HTML文件在根目录，那么assets/img/wiiu/xxx.png的路径应该是根目录下的assets文件夹→img→wiiu里的文件
   • 可以直接在浏览器地址栏输入完整路径（比如http://localhost/assets/img/wiiu/Smile_icon_32x32.png），看能不能正常打开图片，打不开就是路径错了

3. 处理SVG光标兼容性
   部分浏览器对SVG光标支持有限，建议：

   • 把PNG放在第一个优先级，确保作为 fallback 能生效
   • 如果一定要用SVG，给SVG文件加上viewBox属性，比如<svg viewBox="0 0 32 32"...>，保证尺寸匹配

4. 检查图片格式与属性

   • 确认PNG图片有透明背景，否则光标会显示成方块
   • 再次确认图片实际像素是32×32，部分浏览器不支持超过这个尺寸的自定义光标

5. 清除浏览器缓存
   浏览器可能缓存了旧的光标样式，按Ctrl+Shift+R（Windows）或Cmd+Shift+R（Mac）强制刷新页面，加载最新的CSS和图片

6. 排查样式优先级冲突
   检查有没有其他CSS规则覆盖了这个cursor设置，比如：

   • 更具体的选择器（比如div.container比body优先级高）
   • 行内样式（HTML元素上的style="cursor: auto"）
   • 可临时用!important测试是否被覆盖：cursor: url("xxx.png"), auto !important;（不推荐长期使用）

内容的提问来源于stack exchange，提问作者Mr. Weeb