Element-UI Button 点击后背景色如何消失？

golang学习网今天将给大家带来《Element-UI Button 点击后背景色如何消失？》，感兴趣的朋友请继续看下去吧！以下内容将会涉及到等等知识点，如果你是正在学习文章或者已经是大佬级别了，都非常欢迎也希望大家都能给我建议评论哈~希望能帮助到大家！

element-ui button 点击背景色后如何鼠标移开消失

element-ui 的 button 点击后会有一个背景色，但点击其他地方后，背景色不会消失。本文将探讨如何让鼠标移开后背景色立即消失。

类似这样:

点击空白区域变为白色

造成背景色无法消失的原因在于

:focus 的使用。

我们可以使用以下 javascript 代码解决此问题：

clickhandler(evt) {
    let target = evt.target;
    if(target.nodename == "span"){
        target = evt.target.parentnode;
    }
    target.blur();
}

或者，修改 css 样式：

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

以上就是本文的全部内容了，是否有顺利帮助你解决问题？若是能给你带来学习上的帮助，请大家多多支持golang学习网！更多关于文章的相关知识，也可关注golang学习网公众号。