在按钮禁用时消除hover效果

在正常情况下, 鼠标悬停到按钮上会触发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;
}

你可能感兴趣的:(前端,javascript,html)