解决element中 el-button按钮 移入后移出时背景颜色不恢复问题（最简单方法（自认为哈哈））

最新推荐文章于 2025-01-03 12:30:00 发布
最新推荐文章于 2025-01-03 12:30:00 发布
阅读量5.4k 收藏 3
点赞数 5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_46069849/article/details/118087769
版权

  1. 在el-button中加入原有背景颜色以及边框颜色

    <el-button style="background: #409EFF; border: 1px solid #409EFF"></el-button>

  2. 加入hover 移入效果

    	.currenBtn:hover {
	  opacity: 0.8;
	}

  3. 自测后有惊喜

前端小宋
关注
Java前端Vue-2(快速入门)
weixin_45764461的博客
09-11 1197
前端开发模式的发展 静态页面 最初的网页以HTML为主，是纯静态的网页。网页是只读的，信息流只能从服务的到客户端单向流通。开发人员也只关心页面的样式和内容即可。 异步刷新，操作DOM 1995年，网景工程师Brendan Eich 花了10天时间设计了JavaScript语言，随着JavaScript的诞生，我们可以操作页面的DOM元素及样式，页面有了一些动态的效果，但是依然是以静态为主。 ajax盛行：2005年开始，ajax逐渐被前端开发人员所重视，因为不用刷新页面就可以更新页面的数据和渲染效果。此时的
vue实战项目-电商商城前台-（学习尚硅谷的）尚品汇
drhrht的博客
07-31 6741
但是会出现卡顿现象。当微信支付弹窗弹出，就要持续发获取订单支付状态的请求（持续是因为并不知道用户什么时候支付，所以需要持续发请求，直到能获取到支付状态），若接收到支付成功，则路由跳转至支付成功页面。项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错，有了map文件就可以像未加密的代码一样，准确的输出是哪一行哪一列有错。例如，为防止，不经过某路由就直接在地址栏输入本路由地址而跳转至本路由，导致本路由获取不到前面路由的某些数据，所以给本路由加路由独享守卫。...
vue3 Element Plus按钮点击之后颜色不会还原的解决方案
weixin_45142364的博客
10-12 4237
思路：Element Plus提供了样式变量，我的解决思路就是修改其样式变量。以上内容只修改部分按钮的点击效果，如需修改多个按钮，依次添加。注：如果全局引入页面的按钮不起作用，需要的单个页面中引入。然后将xxx.css 引入到页面中。1.新建外部样式 xxx.css。
vue+element-ui中button点击后不恢复原样
ocean_stars的博客
06-22 4958
在做项目时碰到点击element的button后不恢复原样 before: after: button的颜色并没有恢复,强逼症 解决办法 <div> <el-button type="primary" icon="el-icon-download" size="mini" @click="handleClick"> 月度报表导出 </el-button> </div> handleClick(event) { // 点
el-button按下后背景颜色不恢复
柑橘乌云_
02-28 1881
强制失去焦点即可，然而这并没有全面解决问题。因为如果点击按钮的空白处，点击完毕后，的确可以恢复到点击前的状态的，但是如果点击“退出”两个字，在点击完成后，按钮状态还是没有恢复到点击之前的样子。搜索到的解决方案基本如下：evt.target.blur()。只能说天下文章一大抄啊！搜到的几篇帖子，都只是使用。
解决elementui中el-button点击后按钮颜色不变（不恢复点击前的颜色）
蓝胖子的博客
07-01 6453
解决elementui中el-button点击后按钮颜色不变（不恢复点击前的颜色）
vue3 改变el-button 选中的背景颜色 [vue3基础]
感谢您阅读我的博客，如果您有任何问题或建议，请随时联系我。
07-17 4140
设置el-button 高亮显示
前端三件套知识点
二氧化硅.的博客
01-11 2870
前端三件套知识点
Javascript 教程/速成/全面 /总结【含代码】
champion564的博客
04-15 775
Javascript ##目录 1、dom对象的属性方法 1.1 attribute （attr） 1.2document 1.3element 1.4event 鼠标事件 键盘事件 框架/对象（Frame/Object）事件 表单事件 剪贴板事件 打印事件 拖动事件 多媒体（Media）事件 动画事件 过渡事件 其他事件 1.5htmlcollection 1.6style （js操纵样式） HTML DOM 元素对象参考手册 2、bom(locati
中级前端面试题
weixin_46024123的博客
08-18 826
面试题三高级 一、JavaScript高级 判断以下程序的输出结果: var age=100; function test(){ this.age=50; return function(){ return this.age; } } var m=new test(); alert(m()); var n=test(); alert(n()); 答案： 100 50 1.构造函数一旦返回一个对象，就不再创建新对象 2.m获得的是function(){ return this.age; } 3.n=tes
解决elementuiplus的button组件点击之后仍然是hover的问题以及修改主题颜色之后button的颜色问题
qq_57952018的博客
12-06 2532
最近遇到了elementui的button组件的问题，到目前位置官网也是这样的。自己摸索着修复这个问题。
el-button更改颜色
最新发布
qq_64121843的博客
01-03 756
领导不喜欢蓝色，故此让把所有按钮改为绿色。直接在App.vue中更改。
elementui中el-button点击后不失去焦点(按钮颜色不变)的解决
寬真
03-07 5258
因为是前端新手，对很多东西不熟悉，所以就一脸懵逼的去百度，大多数说的都是类似“Element UI点击按钮后不失焦，强制失焦”即可，查看相应的css代码，基本确认就是由于点击后按钮不失去焦点导致的。只能说天下文章一大抄啊！因为如果点击按钮的空白处，点击完毕后，的确可以恢复到点击前的状态的，但是如果点击“退出”两个字，在点击完成后，按钮状态还是没有恢复到点击之前的样子。使用el-button的时候，发现点击按钮后，按钮颜色仍然保持鼠标悬浮上去时候的效果，并没有恢复到正常状态。图2-鼠标悬浮或点击后的按钮。
Element-UI中，按钮点击后移开鼠标颜色仍然聚焦的解决方法（纯css整体解决）
热门推荐
27号白开水的博客
03-12 1万+
在使用element-ui的过程中，发现按钮点击后存在聚焦问题，即点击后移开鼠标，按钮颜色不变回原来的样式，而是会加上一个:focus的偏暗的样式，只有在别处点击一下，才会清除效果，让我极为难受。 在 Element官网-Button 按钮 看了一下，竟然也是这个鬼样子=_=。 在网上搜了一些解决办法，大都是按钮绑定方法然后使用 ev.target.blur()强制按钮失焦。但是一个页面往往有很多个按钮，我们一个一个往上加方法似乎有点麻烦。 后来查看了前端样式，发现el-button上:focus和.hov
vue3 + el-button 点击后颜色不恢复
wdm891026的博客
10-11 1564
vue3 + el-button 点击后颜色不恢复
button鼠标离开样式修改_鼠标移入和移出button按钮时改变背景颜色，为什么移出不改变颜色呢？...
weixin_39714191的博客
12-21 972
')"style="width:80px;he...onmouseout="mouseout()" onclick="viewbillView(this,'')" style="width: 80px;height: 24px; border: #7F7F7F 1px solid; background-color: #F2F2F2; padding: 2px;cursor: hand;" /&g...
(css)清除el-table背景色
nyf_unknow的博客
07-21 1319
【代码】(css)清除el-table背景色。
鼠标移动到button颜色改变的实现
moker321的博客
12-27 8467
鼠标移动到button颜色改变的实现 我使用的是jsp，html方法一致 要实现button需要用到onmouseover与onmouseout方法 示例： <input type="button" value="喜欢" οnmοuseοver="this.style.backgroundColor='#5f5f5f';"οnmοuseοut="this.style.backgroundColor='#cacaca';" class="check2"> 鼠标未移入效果： 鼠标移入后效果： 当然
解决element-plus el-button点击之后回复默认颜色问题
06-06
要解决element-plus el-button点击之后回复默认颜色的问题，你可以使用CSS伪类选择器`:not(:disabled):active`来设置按钮的活动状态样式。示例代码如下： ```css .el-button:not(:disabled):active { background-color: #409EFF; border-color: #409EFF; color: #fff; } ``` 这样，在按钮被点击时，它的背景颜色、边框颜色和文字颜色都会变为指定的颜色。注意，这个样式只在按钮可点击且被点击时生效，如果按钮不可点击或未被点击，则会保持默认样式。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值