悬停的背景颜色变化打破了模拟+显示答案

【问题标题】：Hovered background color change breaks simulated + display悬停的背景颜色变化打破了模拟+显示
【发布时间】：2020-08-24 20:06:02
【问题描述】：

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

这是笔：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;
}

【问题讨论】：

标签： css button background hover

【解决方案1】：

知道为什么会这样吗？

因为您正在覆盖您为按钮指定的background-size，通过background 速记属性应用更改后的渐变，这会将您未指定的所有个人背景属性重置为其默认值。（.AddToBagButton__decrease:hover 比 .AddToBagButton__decrease 具有更高的特异性。）

做到这一点

&:hover {
    background-image: …

相反。（渐变在 CSS 中被视为图像。）

【讨论】：