避免按钮点击后背景色残留
在使用 element-ui 的按钮控件时，经常遇到点击后按钮背景色会留下，只有点击其他位置才能消失的问题。想要解决这一问题，可以从以下方面着手：
使用 javascript 移除焦点
这是因为使用了 :focus 伪类，可以利用 javascript 在点击按钮之外的区域时移除该焦点：
clickhandler(evt) {
let target = evt.target;
if(target.nodename == "span"){
target = evt.target.parentnode;
}
target.blur();
}修改样式
另一种方式是重新编写样式，使得按钮只有在悬停或点击按下时才有背景色，而在鼠标移开后恢复原来的样式：
/*鼠标点击后移开，恢复本身样式*/
.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;
}以上就是Element-UI 按钮点击后背景色残留问题如何解决？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
911
收藏
