Element-UI中，按钮点击后移开鼠标颜色仍然聚焦的解决方法（纯css整体解决）

62 阅读 0 评论 41 点赞

我是靠谱客的博主虚幻仙人掌，最近开发中收集的这篇文章主要介绍Element-UI中，按钮点击后移开鼠标颜色仍然聚焦的解决方法（纯css整体解决），觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

文章原创作者：27号白开水
链接：https://blog.csdn.net/kangrushuai/article/details/114686368

在使用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;
}