Cargo建站时实现点击切换自定义图片鼠标光标相关问题咨询

前置准备 #

先将所有需要用到的光标图片上传到Cargo自带的媒体库，获取图片直链，建议光标尺寸控制在32*32px以内，优先使用PNG或CUR格式，避免适配异常。 #

1. 全站设置默认自定义光标 #

你之前在单页HTML编辑器设置不生效，是因为单页代码仅作用于当前页面，要全站生效需要将代码注入全局配置：

1. 进入Cargo后台，依次点击「Design」-「Custom Code」板块
2. 将以下CSS代码粘贴到「Global Head」输入框中，替换占位的图片链接即可

/* 全局默认自定义光标 */
* {
  cursor: url("替换为你的默认光标图片直链"), auto !important;
}

* 选择器匹配全站所有元素，!important 用于覆盖Cargo平台自带的默认光标样式，避免被系统规则覆盖。 #

2. 实现点击切换其他自定义光标 #

同样在「Global Head」中追加以下JS代码，替换对应的图片链接即可实现点击切换效果：

// 可自行扩展更多光标选项
const cursorList = [
  'url("替换为默认光标图片直链"), auto',
  'url("替换为要切换的光标图片直链"), auto'
]
let currentCursorIndex = 0

document.addEventListener('click', () => {
  // 切换光标索引
  currentCursorIndex = (currentCursorIndex + 1) % cursorList.length
  // 全局生效新光标
  document.documentElement.style.cursor = cursorList[currentCursorIndex]
  // 覆盖所有子元素的光标样式，避免特殊元素样式冲突
  document.querySelectorAll('*').forEach(el => {
    el.style.cursor = cursorList[currentCursorIndex]
  })
})

如果需要切换3个及以上的自定义光标，只需要往cursorList数组里追加对应的光标配置项即可。 #

生效验证注意事项 #

• 保存全局代码后清空浏览器缓存再预览，Cargo全局配置更新最多有2分钟延迟，未生效可稍等后刷新
• 所有光标图片必须使用Cargo媒体库的直链，禁止使用外部链接，避免跨域限制导致光标加载失败
• 若存在按钮、链接等自带特殊光标样式的元素，上述代码的!important规则已做强制覆盖，无需额外调整

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