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

 思路来自

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

在使用element-ui的过程中，发现按钮点击后存在聚焦问题，即点击后移开鼠标，按钮颜色不变回原来的样式，而是会加上一个:focus的偏暗的样式，只有在别处点击一下，才会清除效果，让我极为难受。

原始代码：

<el-button size="mini" style="border-color: transparent;">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
        <path d="M4.16634 9.99935H4.17467M9.99967 9.99935H10.008M15.833 9.99935H15.8413M4.99967 9.99935C4.99967 10.2204 4.91188 10.4323 4.7556 10.5886C4.59932 10.7449 4.38735 10.8327 4.16634 10.8327C3.94533 10.8327 3.73337 10.7449 3.57709 10.5886C3.42081 10.4323 3.33301 10.2204 3.33301 9.99935C3.33301 9.77833 3.42081 9.56637 3.57709 9.41009C3.73337 9.25381 3.94533 9.16602 4.16634 9.16602C4.38735 9.16602 4.59932 9.25381 4.7556 9.41009C4.91188 9.56637 4.99967 9.77833 4.99967 9.99935ZM10.833 9.99935C10.833 10.2204 10.7452 10.4323 10.5889 10.5886C10.4326 10.7449 10.2207 10.8327 9.99967 10.8327C9.77866 10.8327 9.5667 10.7449 9.41042 10.5886C9.25414 10.4323 9.16634 10.2204 9.16634 9.99935C9.16634 9.77833 9.25414 9.56637 9.41042 9.41009C9.5667 9.25381 9.77866 9.16602 9.99967 9.16602C10.2207 9.16602 10.4326 9.25381 10.5889 9.41009C10.7452 9.56637 10.833 9.77833 10.833 9.99935ZM16.6663 9.99935C16.6663 10.2204 16.5785 10.4323 16.4223 10.5886C16.266 10.7449 16.054 10.8327 15.833 10.8327C15.612 10.8327 15.4 10.7449 15.2438 10.5886C15.0875 10.4323 14.9997 10.2204 14.9997 9.99935C14.9997 9.77833 15.0875 9.56637 15.2438 9.41009C15.4 9.25381 15.612 9.16602 15.833 9.16602C16.054 9.16602 16.266 9.25381 16.4223 9.41009C16.5785 9.56637 16.6663 9.77833 16.6663 9.99935Z" stroke="#6B7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
</el-button>

如图:

未点击

点击后已松开

解决方法:

加入css类样式

<el-button size="mini" class="buttonDiv" style="border-color: transparent;">
    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
        <path d="M4.16634 9.99935H4.17467M9.99967 9.99935H10.008M15.833 9.99935H15.8413M4.99967 9.99935C4.99967 10.2204 4.91188 10.4323 4.7556 10.5886C4.59932 10.7449 4.38735 10.8327 4.16634 10.8327C3.94533 10.8327 3.73337 10.7449 3.57709 10.5886C3.42081 10.4323 3.33301 10.2204 3.33301 9.99935C3.33301 9.77833 3.42081 9.56637 3.57709 9.41009C3.73337 9.25381 3.94533 9.16602 4.16634 9.16602C4.38735 9.16602 4.59932 9.25381 4.7556 9.41009C4.91188 9.56637 4.99967 9.77833 4.99967 9.99935ZM10.833 9.99935C10.833 10.2204 10.7452 10.4323 10.5889 10.5886C10.4326 10.7449 10.2207 10.8327 9.99967 10.8327C9.77866 10.8327 9.5667 10.7449 9.41042 10.5886C9.25414 10.4323 9.16634 10.2204 9.16634 9.99935C9.16634 9.77833 9.25414 9.56637 9.41042 9.41009C9.5667 9.25381 9.77866 9.16602 9.99967 9.16602C10.2207 9.16602 10.4326 9.25381 10.5889 9.41009C10.7452 9.56637 10.833 9.77833 10.833 9.99935ZM16.6663 9.99935C16.6663 10.2204 16.5785 10.4323 16.4223 10.5886C16.266 10.7449 16.054 10.8327 15.833 10.8327C15.612 10.8327 15.4 10.7449 15.2438 10.5886C15.0875 10.4323 14.9997 10.2204 14.9997 9.99935C14.9997 9.77833 15.0875 9.56637 15.2438 9.41009C15.4 9.25381 15.612 9.16602 15.833 9.16602C16.054 9.16602 16.266 9.25381 16.4223 9.41009C16.5785 9.56637 16.6663 9.77833 16.6663 9.99935Z" stroke="#6B7280" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
    </svg>
</el-button>

 css：

/*鼠标点击后移开，恢复本身样式*/
.buttonDiv, .buttonDiv:focus:not(.buttonDiv:hover){ 
    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: #eaf5ff;
    border: 1px solid #2794f8 !important;
    color: white;
}

实现效果：

原始图标

鼠标悬浮没有按下

鼠标按下并悬浮

鼠标按下并离开