修改el-button按钮背景色后，按钮失去了elementUI原有的hover和active的效果

最新推荐文章于 2024-09-20 10:51:37 发布

WDY66886688

最新推荐文章于 2024-09-20 10:51:37 发布

阅读量1.2k

点赞数 8

分类专栏： elementUI Vue2 文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/WDY66886688/article/details/137544343

版权

Vue2 同时被 2 个专栏收录

21 篇文章

订阅专栏

elementUI

9 篇文章

订阅专栏

文章讨论了ElementUI中的el-button--primary组件在hover和active状态下的样式问题，特别提到当添加not(.is-disabled)条件时，active状态的透明度只在hover时生效。

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

应完整修改为：

<el-button type="primary" icon="el-icon-plus" @click="addUser">新增用户</el-button>

.el-button--primary:not(.is-disabled) {
    background-color: #1174de;
    border-color: #1174de;
    &:hover {
      &:not(.is-disabled) {
        opacity: 0.8;
      }
      &:active {
        opacity: 1;
      }
    }
  }

注意：.el-button--primary:后要增加not(.is-disabled)，否则disabled状态下也有完整透明度的背景色

存疑：为什么&:active在&:hover内才生效？