0
点赞
收藏
分享

微信扫一扫

elementUI el-button 点击后样式自动恢复的方法

一叶随风_c94d 2022-04-16 阅读 143

问题描述:

elementUI 中的按钮,点击后会有focus样式,且只有点击其他地方后,按钮才会失焦,样式才会恢复到点击之前的样式。例如主要按钮是亮蓝色,点击后是暗蓝色。点击其他地方才会恢复亮蓝色。

我希望将鼠标放在按钮上时会改变样式,但是点击按钮后样式自动恢复到点击前的样子。

解决办法:

给按钮添加样式默认样式,默认样式会覆盖掉focus的样式,再添加上hover样式,这样就能实现将鼠标放在按钮上时会改变样式,但是点击按钮后样式自动恢复到点击前的样子。

以一个默认按钮和一个主要按钮为例,给出代码

第一步:给button添加class

<el-button class="default-button-style">默认按钮</el-button>
<el-button type="primary" class="primary-button-style">主要按钮</el-button>

第二步:给按钮添加默认样式和hover样式

.default-button-style {
    background:#fff;
    border-color:#cbcbcd;
    color:#505255;
}
.default-button-style :hover{
    background:#ecf5ff;
    border-color:#c6e2ff;
    color:#409eff;
}

.primary-button-style {
    background:#2979ff;
    border-color:#2979ff;
}
.primary-button-style :hover{
    background:#66b1ff;
    border-color:#66b1ff;
}
举报

相关推荐

0 条评论