CSS实现div悬停时背景变暗且不改变文字颜色的方法

filter: brightness()的作用范围是整个元素的最终渲染结果，包含背景、文字、内边距区域所有内容，会对所有子元素生效，因此无法实现仅调整背景亮度的需求。

不要对整个元素加滤镜，直接单独修改背景色的亮度即可，不会对内部白色文字产生任何影响，以下两种写法都可以实现需求：

写法1：直接调整HSL颜色值（推荐） #

你已经使用HSL格式定义了主色，只需要降低HSL第三个参数（亮度值）就能得到同色系的暗调背景，建议把悬停色也定义为CSS变量方便后续维护，代码如下：

:root{
    --Dark-cyan: hsl(158, 36%, 37%);
    --Dark-cyan-hover: hsl(158, 36%, 18%); /* 亮度从37%降到18%，可按需调整数值 */
}

#submit{
    background: var(--Dark-cyan);
    text-align: center;
    vertical-align: middle;
    color: white;
    font-weight: 700;
    font-size: 14px;
    width: fit-content;
    height: fit-content;
    padding: 15px 60px;
    border-radius: 15px;
    transition: background 0.2s ease; /* 可选：加颜色过渡让交互更顺滑 */
    cursor: pointer; /* 可选：鼠标悬停显示手型，符合按钮交互习惯 */
}

#submit:hover{
    background: var(--Dark-cyan-hover); /* 替换原来的filter属性 */
}

对应的HTML代码不需要做任何修改：

<div id="submit"> Add to Cart</div>

写法2：背景叠加半透明黑遮罩 #

如果不想手动计算暗色色值，可以在原有背景色上叠加一层半透明黑色，通过调整透明度控制变暗程度，不需要额外定义颜色变量：

#submit:hover{
    /* 0.4为遮罩透明度，范围0-1，数值越大背景越暗 */
    background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), var(--Dark-cyan);
}

避坑提示：不要尝试用opacity属性实现变暗效果，该属性同样会作用于整个元素，会导致内部文字一起变透明，和filter存在一样的问题。

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