问题描述:
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;
}