时间戳

首页 > 解决方案 > 悬停的背景颜色变化打破了模拟+显示

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

问题描述

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

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

标签： cssbuttonbackgroundhover

解决方案

知道为什么会这样吗？

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

做那个

&:hover {
    background-image: …

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

推荐阅读