Element UI 按钮点击后如何让背景色自动消失？

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《Element UI 按钮点击后如何让背景色自动消失？》，聊聊，希望可以帮助到正在努力赚钱的你。

element ui 按钮点击后背景色如何随鼠标移开而消失？

当使用 element ui 带有 :focus 的按钮时，按钮在被点击后会保持背景色。要让背景色随着鼠标移开而消失，可以有以下解决方案：

1. blur 按钮元素

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

2. 重写 css 样式

通过重写 css 样式，可以自定义按钮在不同状态下的外观。

<el-button class="buttondiv" size="small">查询</el-button>
<el-button class="buttondiv" size="small">重置</el-button>

/*鼠标点击后移开，恢复本身样式*/
.buttonDiv, .buttonDiv:focus:not(.buttonDiv:hover){ 
    ... // 其他样式
}
/*鼠标悬浮，没有按下；鼠标按下后抬起，没有移开*/
.buttonDiv:focus, .buttonDiv:hover{
    background: #eaf5ff;
    ... // 其他样式
}
/*鼠标按下，没有抬起*/
.buttonDiv:active {
    background: #2794f8;
    ... // 其他样式
}

本篇关于《Element UI 按钮点击后如何让背景色自动消失？》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！