在正常情况下, 鼠标悬停到按钮上会触发hover效果, 背景颜色和文字颜色都发生变化, 当我们给按钮添加禁用效果时需要消除hover效果
解决方案: 使用:not(.is-disabled) 来给没有被禁用(样式类名中不包含is-disabled)的按钮添加hover效果
.one-button-primary {
background: #409eff;
color: #fff;
border-color: #409eff;
&:hover {
&:not(.is-disabled) {
color: #fff;
background: #66b1ff;
}
}
}
.one-button.is-disabled {
opacity: 0.6;
cursor: not-allowed;
}