悬停背景颜色变化中断模拟+显示

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

Any idea why this happens?

因为您要覆盖为按钮指定的 background-size，通过 background shorthand 属性应用更改后的渐变，这会重置所有 individual 你没有指定的背景属性，为它们的默认值。（.AddToBagButton__decrease:hover 比 .AddToBagButton__decrease 具有更高的特异性。）

做到这一点

&:hover {
    background-image: …

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

悬停背景颜色变化中断模拟+显示

Hovered background color change breaks simulated + display

css

background

button

hover