如何利用多值CSS变量实现p标签hover时仅背景变暗？

架构老林

2026-7-5

解决CSS多值变量调整亮度的问题

核心结论

目前CSS不支持直接提取多值变量中的单个分量（你尝试的var(--my-color)[2]这种数组式取值语法不存在），必须将HSL的色相、饱和度、亮度拆分为独立变量后，再对亮度进行calc计算。

为什么原代码不生效

你写的p:hover规则里，hsl(calc(var(--my-color)[2] - 5%))是无效语法：

CSS变量的var()函数只能完整引用变量值，无法通过索引拆分多值内容
浏览器无法识别[2]这种取值方式，导致整个background-color声明失效

正确实现方式：拆分HSL分量变量

把色相、饱和度、亮度拆成单独的CSS变量，hover时仅修改亮度值：

:root {
  --hue: 193;
  --saturation: 55%;
  --lightness: 40%;
}

p {
  background-color: hsl(var(--hue), var(--saturation), var(--lightness));
  color: #ffffff; /* 可根据需求调整文字颜色 */
}

p:hover {
  background-color: hsl(var(--hue), var(--saturation), calc(var(--lightness) - 5%));
}

替代方案：用伪元素单独给背景加滤镜

如果不想重构现有变量结构，可以通过伪元素隔离背景和文字，只对背景应用filter：

:root {
  --my-color: 193 55% 40%;
}

p {
  position: relative;
  background-color: transparent;
  color: #ffffff;
  z-index: 1; /* 确保文字在背景层上方 */
}

p::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: hsl(var(--my-color));
  filter: brightness(100%);
  z-index: -1; /* 伪元素作为背景层 */
}

p:hover::before {
  filter: brightness(85%); /* hover时降低背景亮度 */
}