如何解决悬停的背景颜色变化模拟和显示中断
我有一个带有+和-符号的按钮,这些按钮由线性渐变和背景尺寸组成。如果我添加了悬停状态,仅更改颜色,则+和-效果不起作用。知道为什么会这样吗?
这是笔: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中被视为图像。)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。