文章原创作者：27号白开水 ：
在使用element-ui的过程中，发现按钮点击后存在聚焦问题，即点击后移开鼠标，按钮颜色不变回原来的样式，而是会加上一个:focus的偏暗的样式，只有在别处点击一下，才会清除效果，让我极为难受。
在 Element官网-Button 按钮 看了一下，竟然也是这个鬼样子=_=。
在网上搜了一些解决办法，大都是按钮绑定方法然后使用 ev.target.blur()强制按钮失焦。但是一个页面往往有很多个按钮，我们一个一个往上加方法似乎有点麻烦。
后来查看了前端样式，发现el-button上:focus和.hover使用了相同的效果：
.el-button:focus, .el-button:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}所以有如下动作效果：
①当悬浮不点击时，触发.el-button:hover；
②点击按下鼠标时，触发.el-button:active；
③点击抬起鼠标时，触发.el-button:focus, .el-button:hover；
④移开鼠标时，仍然触发.el-button:focus;
⑤移开后点击别处，触发.el-button。
解决方法：重新定义样式，使用:not()使③和④具有不同的触发效果。
由于项目需要，我在el-button上加入了新的样式，如图：
悬浮效果如图：
鼠标按下效果如图：
上代码：
<el-button class="buttonDiv" size="small">查询</el-button>
<el-button class="buttonDiv" size="small">重置</el-button>/*鼠标点击后移开，恢复本身样式*/
.buttonDiv, .buttonDiv:focus:not(.buttonDiv:hover){
margin-right: 12px;
border: 1px solid #2794f8;
border-radius: 2px;
box-shadow: 0 2px 4px 0 #f4f4f4;
color: #2794f8;
background: white;
}
/*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
.buttonDiv:focus, .buttonDiv:hover{
background: #eaf5ff;
border: 1px solid #2794f8 !important;
color: #2794f8;
}
/*鼠标按下，没有抬起*/
.buttonDiv:active {
background: #2794f8;
color: white;
}
在使用element-ui的过程中，发现按钮点击后存在聚焦问题，即点击后移开鼠标，按钮颜色不变回原来的样式，而是会加上一个:focus的偏暗的样式，只有在别处点击一下，才会清除效果，让我极为难受。
在 Element官网-Button 按钮 看了一下，竟然也是这个鬼样子=_=。
在网上搜了一些解决办法，大都是按钮绑定方法然后使用 ev.target.blur()强制按钮失焦。但是一个页面往往有很多个按钮，我们一个一个往上加方法似乎有点麻烦。
后来查看了前端样式，发现el-button上:focus和.hover使用了相同的效果：
.el-button:focus, .el-button:hover {
color: #409eff;
border-color: #c6e2ff;
background-color: #ecf5ff;
}所以有如下动作效果：
①当悬浮不点击时，触发.el-button:hover；
②点击按下鼠标时，触发.el-button:active；
③点击抬起鼠标时，触发.el-button:focus, .el-button:hover；
④移开鼠标时，仍然触发.el-button:focus;
⑤移开后点击别处，触发.el-button。
解决方法：重新定义样式，使用:not()使③和④具有不同的触发效果。
由于项目需要，我在el-button上加入了新的样式，如图：
悬浮效果如图：
鼠标按下效果如图：
上代码：
<el-button class="buttonDiv" size="small">查询</el-button>
<el-button class="buttonDiv" size="small">重置</el-button>/*鼠标点击后移开，恢复本身样式*/
.buttonDiv, .buttonDiv:focus:not(.buttonDiv:hover){
margin-right: 12px;
border: 1px solid #2794f8;
border-radius: 2px;
box-shadow: 0 2px 4px 0 #f4f4f4;
color: #2794f8;
background: white;
}
/*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
.buttonDiv:focus, .buttonDiv:hover{
background: #eaf5ff;
border: 1px solid #2794f8 !important;
color: #2794f8;
}
/*鼠标按下，没有抬起*/
.buttonDiv:active {
background: #2794f8;
color: white;
}
