悬停的背景颜色更改会中断模拟+显示

Question

我有一个带有+和-符号的按钮，符号由线性渐变和背景大小组成。如果我添加悬停状态，只是改变颜色，+和-效果就不起作用。知道为什么会发生这种事吗？

这是钢笔：https://codepen.io/miguelrivero/pen/gOraZaM

.AddToBagButton__decrease,
.AddToBagButton__increase {
background: linear-gradient(#2e8561, #2e8561) top left,
linear-gradient(#2e8561, #2e8561) top right,
linear-gradient(#2e8561, #2e8561) bottom left,
linear-gradient(#2e8561, #2e8561) bottom right;
background-repeat: no-repeat;
border: 13px solid #2e8561;
box-sizing: border-box;
border-radius: 50%;
&:hover {
background: linear-gradient(#215e45, #215e45) top left,
linear-gradient(#215e45, #215e45) top right,
linear-gradient(#215e45, #215e45) bottom left,
linear-gradient(#215e45, #215e45) bottom right;
border: 13px solid #215e45;
}
}
.AddToBagButton__decrease {
background-size: 100% calc(50% - .5px);
left: 0;
}
.AddToBagButton__increase {
background-size: calc(50% - 1px) calc(50% - .5px);
right: 0;
}

Answer 1

知道为什么会发生这种情况吗？

因为您要覆盖为按钮指定的background-size，所以通过background简写属性应用更改后的渐变，该属性会将您未指定的所有单个背景属性重置为默认值。(.AddToBagButton__decrease:hover比.AddToBagButton__decrease具有更高的特异性。(

制作

&:hover {
background-image: …

相反。(梯度在CSS中被视为图像。(