在不更改颜色的情况下使悬停时颜色变深答案

【问题标题】：make the color darker on hover without change the color在不更改颜色的情况下使悬停时颜色变深
【发布时间】：2022-07-06 22:17:00
【问题描述】：

我想让 div 的颜色在悬停时变暗
我尝试使用滤镜降低亮度，但这也会影响文本

:root{
    --Dark-cyan: hsl(158, 36%, 37%);
}

#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;
}

#submit:hover{
    filter: brightness(50%);
}

 &lt;div id="submit"&gt; Add to Cart&lt;/div&gt;

这是我想要的结果： off hover on hover

【问题讨论】：

这能回答你的问题吗？ How to darken a background using CSS?
你为什么不使用正确的<button>？ div 是语义上的废话（：因此缺少键盘控制、tabindex 和任何可访问性角色。

标签： html css hover

【解决方案1】：

您可以使用backdrop-filter 代替过滤器 :) '因为它适用于元素后面的所有东西，所以要看到效果，你必须使元素或其背景至少部分透明'

:root {
    --Dark-cyan: hsl(158, 36%, 37%, 0.9);
}

#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;
}

#submit:hover {
    backdrop-filter: brightness(50%);
}

&lt;div id="submit"&gt; Add to Cart&lt;/div&gt;

【讨论】：

对不起，我已经编辑了答案=>“因为它适用于元素后面的所有内容，要查看效果，您必须使元素或其背景至少部分透明”
请将您的答案添加到the duplicate target question 而不是这个。

【解决方案2】：

您可以将box-shadow: inset 与大号spread-radius 一起使用

不影响文字颜色

:root{
    --Dark-cyan: hsl(158, 36%, 37%);
}

#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;
}

#submit:hover{
    box-shadow: inset 0 0 0 /*spread-radius:*/ 100px #33333377;
}

 &lt;div id="submit"&gt; Add to Cart&lt;/div&gt;

【讨论】：

请将您的答案添加到the duplicate target question 而不是这个。

【解决方案3】：

试试这个：

您可以尝试减少 rgba() 的 alpha 属性

试试这样：

.your-css-class:hover {
    background: rgba(0, 0, 0, 0.25);
 }

【讨论】：

OP 使用的是hsl()，因此建议hsla() 或hsl() 使用alpha 通道参数会更合适。