如何通过颜色选择器修改CSS中a:hover的背景颜色？

我来帮你搞定这个问题～首先得搞清楚为什么你之前的方法不生效，然后给你一个靠谱的解决方案：

问题根源 #

你之前尝试的两种写法都存在问题：

1. .colorhover a:hover：这个选择器是找带有colorhover类的父元素里面的<a>标签，但你的<a>标签本身就带有colorhover类，所以这个选择器根本匹配不到目标元素；
2. $('a:hover').css()：jQuery的.css()只能操作元素的内联样式，而:hover是CSS伪类，内联样式里没法定义伪类规则——你写的这段代码其实只是给**当前正处于hover状态的<a>**临时加了内联背景色，鼠标移开后其他元素hover还是用原来的规则，甚至可能因为CSS优先级问题完全不生效。

解决方案：用CSS变量来实现 #

你已经在CSS里用到了变量的思路（var(--c,#4CAF50)），那我们就顺着这个思路优化：

步骤1：修正CSS选择器 #

把你原来的.colorhover a:hover改成匹配目标元素的选择器——因为你的<a>本身带有colorhover类，所以应该写：

a.colorhover:hover {
  background-color: var(--hover-bg, #4CAF50);
}

这里--hover-bg是我们自定义的CSS变量，后面的#4CAF50是默认值，确保没有设置变量的时候也有默认样式。

步骤2：修改JS代码，操作CSS变量 #

不要直接去操作a:hover，而是修改CSS变量的值，这样所有用到这个变量的hover样式都会同步更新：

$('#colorpickerHolder').ColorPicker({
  color: '#4CAF50', // 初始值和CSS默认值保持一致
  onShow: function (colpkr) {
    $(colpkr).fadeIn(500);
    return false;
  },
  onHide: function (colpkr) {
    $(colpkr).fadeOut(500);
    return false;
  },
  onChange: function (hsb, hex, rgb) {
    // 给body设置CSS变量，这样所有用到--hover-bg的元素都会生效
    $('body').css('--hover-bg', '#' + hex);
    
    // 如果你只想让某个特定的a元素生效，就把选择器改成目标元素：
    // $('a.colorhover').css('--hover-bg', '#' + hex);
  }
});

额外提醒 #

检查你的HTML结构，目前提供的代码里<ul>和一些<li>标签没有闭合，虽然不影响样式，但可能导致其他问题，记得补全闭合标签哦～

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