初次接触前端,初次使用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.target
if (target.nodeName === 'I') {
target = evt.target.parentNode
}
target.blur()
},
</script>