element-ui button 点击之后 按钮会有一个背景色 点击其他地方消失 怎么让他鼠标移开就消失呢?

作者站长头像
站长
· 阅读数 7

类似这样:element-ui button 点击之后 按钮会有一个背景色 点击其他地方消失 怎么让他鼠标移开就消失呢?点击空白区域变为白色element-ui button 点击之后 按钮会有一个背景色 点击其他地方消失 怎么让他鼠标移开就消失呢?

回复
1个回答
avatar
test
2024-06-28

是因为使用了::focusanswer image可以:

 clickHandler(evt) {
        let target = evt.target;
        if(target.nodeName == "SPAN"){
            target = evt.target.parentNode;
        }
        target.blur();
}

或者重写样式:

<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;
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引,对解决问题有帮助
  • 遵循 Markdown 语法排版,代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容