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

这篇具有很好参考价值的文章主要介绍了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>

如图:

vue3的el-button点击后变透明了没用变回来,ui,css,vue.js,前端,前端框架,elementui — 未点击

解决方法:

加入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;
}

实现效果：文章来源地址https://www.toymoban.com/news/detail-811205.html