初次接触前端，初次使用vue，初次使用elementui，难免遇到坑。
使用el-button的时候，发现点击按钮后，按钮颜色仍然保持鼠标悬浮上去时候的效果，并没有恢复到正常状态
原因
el-button 的鼠标经过样式以及点击/获取焦点样式其实都是用css完成的。点击按钮后按钮会获得焦点CSS :focus 选择器触发；
也就是说获得焦点才会导致 el-button 高亮；
解决方案
你可能会想去掉 :focus这个选择器；或者覆盖
我告诉你！不可能！
我尝试层叠掉那个样式但是color和boder-color貌似给不了none只能用新的样式重叠
1.直接使用CSS 不使用他的样式(推荐)
直接找到 el-button 给它一个类名 然后直接给它写样式
如下就是鼠标经过变色：
<template><el-button class="view" type="primary" icon="el-icon-view" circle size="mini" /></template><style scoped>.view:hover {background-color: #3f9eff;color: #fff;border-color: #3f9eff;}.view {color: #409eff;background: #ecf5ff;border-color: #b3d8ff;}</style>
2.利用强制失去聚焦解决
使用element-ui的样式利用强制失去聚焦解决
因为el-buttion 本身就是因为点击后聚焦才导致按钮一直高亮，那么我们就让他点击后强制失去焦点！
<template><el-button class="view" type="primary" icon="el-icon-view" circle size="mini" /></template><script>fn(evt) {console.log(evt)let target = evt.targetif (target.nodeName === 'I') {target = evt.target.parentNode}target.blur()},</script>
如果觉得《elementui中el-button点击后不失去焦点(按钮颜色不变)的解决方案》对你有帮助，请点赞、收藏，并留下你的观点哦！
