如何为网站链接设置每次hover时切换不同颜色的全局效果？

第一步：调整现有CSS #

先把你现有的hover样式改成由JS控制，修改后的CSS如下：

[data-predefined-style="true"] bodycopy a {
  color: rgba(0, 0, 0, 0.85);
  text-decoration: none;
}

/* 注释掉原hover样式，让JS动态控制颜色 */
/* [data-predefined-style="true"] bodycopy a:hover {
  color: rgba(0, 0, 0, 0.85);
} */

第二步：编写JavaScript代码 #

这段代码会实现每次hover链接时循环切换颜色，你可以直接复制使用：

// 定义颜色列表，想换颜色直接改这里就行
const hoverColors = ['#0c7740', '#ff4b00', '#2351fc', '#5741d1', '#c7c41c'];

// 获取所有符合条件的链接
const links = document.querySelectorAll('[data-predefined-style="true"] bodycopy a');

// 给每个链接绑定hover事件
links.forEach(link => {
  // 初始化当前颜色索引，默认从0开始
  let currentIndex = 0;
  
  link.addEventListener('mouseenter', () => {
    // 设置当前hover颜色
    link.style.color = hoverColors[currentIndex];
    // 更新索引，循环回到开头
    currentIndex = (currentIndex + 1) % hoverColors.length;
  });
});

第三步：把代码添加到Cargo Collective网站 #

1. 登录你的Cargo Collective后台
2. 找到网站的「Custom Code」（自定义代码）或「Settings > Advanced > Custom HTML」这类板块（不同版本位置可能略有差异）
3. 把上面的JavaScript代码粘贴到</body>标签之前的区域（通常叫“Footer”或“Body End”部分）
4. 保存设置，刷新网站就能看到效果

怎么更换颜色列表 #

直接修改JS代码里的hoverColors数组就行，比如想加新颜色就往数组里加，想换颜色就替换掉对应的十六进制值，格式保持'#xxxxxx'即可。

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