在按钮禁用时消除hover效果

最新推荐文章于 2024-06-07 19:31:00 发布

原创最新推荐文章于 2024-06-07 19:31:00 发布 · 3.6k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #html

这篇博客介绍了如何在CSS中使用`:not(.is-disabled)`选择器来为未禁用的按钮保留hover效果。当按钮有`is-disabled`类时，hover效果会被消除，表现为背景颜色和文字颜色在鼠标悬停时不改变，同时禁用状态的按钮会呈现半透明并设置`cursor:not-allowed`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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