
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 样式:
查询 重置
/*鼠标点击后移开,恢复本身样式*/
.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;
}










