如何让禁用元素hover时恢复CSS原始颜色（无需显式声明）

嘿，这个场景我之前处理过！你遇到的核心问题是：inherit/initial/unset这几个关键字都没法精准指向元素自身的原始自定义颜色——inherit只会拿父元素的颜色，initial是浏览器默认值，unset是二者的结合，都不是你要的效果。下面给你两个不用在:disabled伪类里显式写颜色值的方案：

方案1：只给非禁用元素添加hover样式 #

这是最简洁的思路，直接限制hover效果的作用范围，让禁用元素根本不会触发hover的颜色变化：

/* 元素正常状态的颜色（你的原始颜色） */
.your-element {
  color: #2d3748;
}

/* 仅当元素未禁用时，hover才生效 */
.your-element:not(:disabled):hover {
  color: #4299e1;
}

/* 禁用状态只处理其他样式，不用管颜色 */
.your-element:disabled {
  cursor: not-allowed;
  opacity: 0.7;
  /* 这里完全不用写color！ */
}

这样一来，禁用元素在hover时，因为:not(:disabled)的条件不满足，hover样式不会生效，自然保持你定义的原始颜色，完美符合需求。

方案2：用CSS变量保存原始颜色 #

如果你的项目里hover样式是全局通用的（没法用:not(:disabled)来限制），那可以用CSS变量把原始颜色存起来，禁用时直接引用变量：

.your-element {
  /* 把原始颜色存在变量里 */
  --original-color: #2d3748;
  color: var(--original-color);
}

/* 全局hover样式 */
.your-element:hover {
  color: #4299e1;
}

/* 禁用时重置为原始颜色，不用硬写值 */
.your-element:disabled {
  color: var(--original-color);
  cursor: not-allowed;
  opacity: 0.7;
}

这个方法的好处是如果后续要修改原始颜色，只需要改--original-color这一处，维护起来更方便。

为什么你之前的尝试没效果？ #

再给你理清楚这几个关键字的区别，避免以后踩坑：

• inherit：强制继承父元素的颜色，但你的元素可能有自己的自定义颜色，和父级不一样，所以不符合需求；
• initial：把颜色重置为浏览器的默认样式（比如按钮默认是黑色），不是你自定义的原始颜色；
• unset：如果当前属性是继承属性（比如color），就等同于inherit，否则等同于initial，同样拿不到元素自身的自定义默认值。

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