javascript elementUI el-button 点击后样式自动恢复的方法（纯css已解决）

甜水一博客 2024-03-11 126 0

问题描述：

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

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

解决办法：在全局css中对按钮添加样式，点击完后也还是对应颜色不会变暗。

//全局修改失焦后的样式

primary类型按钮

.el-button.el-button--primary.is-link:not(.is-disabled):focus, .el-button.el-button--primary.is-link:not(.is-disabled):hover{

color:var(--el-color-primary)!important;

}

warning类型按钮

//.el-button.el-button--warning.is-link:not(.is-disabled):focus, .el-button.el-button--warning.is-link:not(.is-disabled):hover{

// color:var(--el-color-warning)!important;

//}

success类型按钮

//.el-button.el-button--success.is-link:not(.is-disabled):focus, .el-button.el-button--success.is-link:not(.is-disabled):hover{

// color:var(--el-color-success)!important;

//}

info类型按钮

//.el-button.el-button--info.is-link:not(.is-disabled):focus, .el-button.el-button--info.is-link:not(.is-disabled):hover{

// color:var(--el-color-info)!important;

//}

danger类型按钮

.el-button.el-button--danger.is-link:not(.is-disabled):focus, .el-button.el-button--danger.is-link:not(.is-disabled):hover{

color:var(--el-color-danger)!important;

}

夸智网