如何通过onclick函数修改FontAwesome图标的hover高亮颜色

修改步骤 #

1. 调整CSS代码，抽离图标hover颜色为全局变量 #

在你的CSS文件头部新增全局变量定义，同时修改原有的i:hover样式规则，替换硬编码的颜色值为变量：

/* 新增全局变量定义，默认值保持你原来的绿色 */
:root {
  --icon-hover-color: #9bdc28;
}

/* 找到原有的i:hover规则，修改为以下内容 */
i:hover
{
    color: var(--icon-hover-color);
    transition: 0s;
    text-shadow: 0 0 120px var(--icon-hover-color);
}

2. 修改JS的changeBgColor函数，同步更新全局颜色变量 #

找到你现有JS代码里的changeBgColor函数，新增一行修改全局图标hover颜色变量的逻辑：

function changeBgColor(color) {
  const style = document.querySelector(".card").style;
  style.setProperty("--background", color);
  // 新增以下代码，同步修改所有FontAwesome图标的hover高亮色
  document.documentElement.style.setProperty("--icon-hover-color", color);
};

修改完成后即可实现需求：点击卡片颜色选项时，所有FontAwesome图标的hover高亮色会自动同步为选中的对应颜色，不需要改动其他现有逻辑。

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