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

编程问答 2022-08-15

问题描述

我有一个带有+和-符号的按钮，这些按钮由线性渐变和背景尺寸组成。如果我添加了悬停状态，仅更改颜色，则+和-效果不起作用。知道为什么会这样吗？

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

.AddToBagButton__decrease,.AddToBagButton__increase {
  background: linear-gradient(#2e8561,#2e8561) top left,linear-gradient(#2e8561,#2e8561) top right,#2e8561) bottom left,#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,#215e45) bottom left,#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;
}

解决方法

知道为什么会这样吗？

由于您要覆盖为按钮指定的background-size，因此可以通过background速记属性应用更改的渐变，此属性会重置所有您没有使用的个人背景属性指定为默认值。 （{.AddToBagButton__decrease:hover的特异性比.AddToBagButton__decrease高。）

做到这一点

&:hover {
    background-image: …

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

backgroundbuttonbuttonhover