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

Question

我想让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%);
}

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

这是我想要的结果:下徘徊在悬停

Answer 1

您可以使用backdrop-filter来代替filter:)

因为它适用于元素后面的所有内容，所以要看到效果，您必须使元素或其背景至少部分透明

不幸的是，对于firefox来说，此时需要:用户必须显式启用

特性

: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%);
}

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

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

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

Answer 3

试试这个:

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

试试:

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

Answer 4

可以使用伪::before::afer和一些不透明度在盘旋。看一下代码片段

:root { --Dark-cyan: hsl(158, 36%, 37%, 0.9) }
.btn, .btn::before, .btn::after { border-radius: 15px }
.btn {
color: white;
cursor: pointer;
display: inline-block;
font-size: 14px; font-weight: 700;
height: fit-content; width: fit-content;
padding: 15px 60px;
position: relative;
}
.btn::before, .btn::after {
content: "";
display: block;
position: absolute;
inset: 0;
z-index: -1
}
.btn::before { background-color: black }
.btn::after { transition: opacity 360ms 0ms ease-in-out }
.btn:hover::after { opacity: 0.6 }
#submit::after { background-color: var(--Dark-cyan) }
#remove::after { background-color: red }

<div class="btn" id="submit">Add to Cart</div>
<div class="btn" id="remove">Remove from Cart</div>