【前端】element button鼠标点击按钮更改样式

news2024/9/22 7:32:53

目录

  • 一、实现效果
  • 二、代码如下
  • 🚀写在最后

一、实现效果

在这里插入图片描述

二、代码如下

        <span>
          <el-button type="text">
            <img src="../../../../../src/assets/slice/question.png" style="font-size: 14px;margin-bottom: 0.26rem">
            <span style="margin-top: 0.22rem">按钮1</span>
          </el-button>
          <el-button style="margin-left: 0.5rem" plain>按钮2</el-button>
        </span>
/*鼠标激活*/
  /deep/.el-button--text.is-active,
  /deep/.el-button--text:active {
  background: #EDF0F5;
  border-color: #EDF0F5;
  color: #EDF0F5;
}
  /*鼠标点击时边框颜色去掉*/
  /deep/.el-button--text:focus {
  outline: none;
}
  /*鼠标悬浮*/
  /deep/.el-button--text:hover {
  background: #EDF0F5;
  border-color: #EDF0F5;
  color: #78808F;
}
  /deep/.el-input__inner {
    /*height: 32px;*/
    border-radius: 0;
    font-size: 0.875rem;
  }
  /deep/.el-button {
    height: 32px;
    border-radius: 2px;
    opacity: 1;
    /*border: 1px solid #E0E0E0;*/
    padding: 0 1.5rem;
  }
  /deep/.el-button--text {
    color: #78808F;
    background-color: #ffffff;
    border-color: #ffffff;
    padding: 0.5rem 0.6rem;
  }

🚀写在最后

希望我的分享能够帮助到更多的人,如果觉得我的分享有帮助的话,请大家一键三连支持一下哦~
❤️原创不易,期待你的关注与支持~
点赞👍+收藏⭐️+评论✍️
😊之后我会继续更新前端学习小知识,关注我不迷路~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/714048.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

安全响应中心 — 垃圾邮件事件报告(6.28)

2023年6月 第四周 样本概况 ✅ 类型1&#xff1a;伪造正常转发邮件&#xff08;链接&#xff09; 钓鱼邮件一直是邮件防护绕不开的话题。近日安全团队收到了一批钓鱼邮件&#xff0c;发送者将正常邮件内容和钓鱼内容拼凑在一起&#xff0c;将一封钓鱼邮件伪装成经过转发的正…

TypeScript 总结

文章目录 TypeScript 总结概述运行ts文件方式一方式二 基础声明变量类型数组元组联合类型取值限制 枚举类型any & unknownvoid & undefined类型适配 面向对象函数普通函数箭头函数可选参数默认参数 对象创建对象对象的类型限制 类和接口泛型简单使用多个泛型默认泛型类…

react基础-React原理揭秘React路由基础

React原理揭秘 目标 能够说出React组件的更新机制能够对组件进行性能优化能够说出虚拟DOM和DIff算法 组件更新机制 setState() 的两个作用 修改state更新组件 过程&#xff1a;父组件重新渲染时&#xff0c;也会重新渲染子组件&#xff0c;但只会渲染当前组件子树&#xff…

BUUCTF Cipher 1

BUUCTF:https://buuoj.cn/challenges 题目描述&#xff1a; 还能提示什么呢&#xff1f;公平的玩吧&#xff08;密钥自己找&#xff09; Dncnoqqfliqrpgeklwmppu 注意&#xff1a;得到的 flag 请包上 flag{} 提交, flag{小写字母} 密文&#xff1a; Dncnoqqfliqrpgeklwmppu解…

vector 数据流查询命令

原文来自&#xff1a;vector 数据流查询命令 | 老五笔记 A lightweight, ultra-fast tool for building observability pipelines&#xff0c;vector在日常运维数据采集中也具有非常重要的作用。很多命令和详细说明可以从官方文档中达到最权威的介绍&#xff1a; Vector | A l…

Nginx【Nginx场景实践(代理服务、 反向代理、负载均衡、负载均衡算法)】(八)-全面详解(学习总结---从入门到深化)

目录 Nginx场景实践_代理服务 Nginx场景实践_反向代理 Nginx场景实践_负载均衡 Nginx场景实践_负载均衡算法 Nginx场景实践_代理服务 正向代理 正向代理&#xff0c;是在用户端的。比如需要访问某些国外网站&#xff0c;我们可能需要购买vpn。 正向代理最大的特点&#…

[软件基础] ELF executable and linking formate

Chapter 7 Object File Format (Linker and Libraries Guide) https://docs.oracle.com/cd/E19683-01/817-3677/chapter6-46512/index.html

何时开始学习Qt和C++,以及如何有效学习?

学习Qt并使用C编程可以为您开发跨平台的图形用户界面&#xff08;GUI&#xff09;应用程序提供良好的基础。下面是一些学习Qt的步骤和建议&#xff0c;以及建议的C知识水平&#xff0c;适合您开始学习Qt&#xff1a; 学习C基础知识&#xff1a;Qt是使用C编写的&#xff0c;因此…

【计算机网络】集线器和交换机的区别

1. 早期–总线型以太网 2. 集线器–星型以太网 3.以太网交换机 4. 集线器和以太网交换机的对比 4.1 单播、多播、同时单播 4.2 扩展以太网的单播 4.3 扩展以太网的多播 4.4 小结

麒麟系统(Liunx)离线安装docker和docker compose

文章目录 一、前言二、准备工作1、查看操作系统版本2、查看操作系统架构 三、安装docker和docker compose1、下载docker离线包2、下载docker compose离线包3、准备 docker.service 系统配置文件4、准备docker的安装脚本文件5、准备docker的卸载脚本文件6、安装 docker 和 docke…

【Axure高保真原型】通过输入框动态控制饼图

今天和大家分享通过输入框动态控制饼图的原型模板&#xff0c;在输入框里维护项目数据&#xff0c;可以自动生成对应的饼图&#xff0c;鼠标移入对应扇形&#xff0c;可以查看对应数据。使用也非常方便&#xff0c;只需要修改输入框里的数据&#xff0c;或者复制粘贴文本&#…

低代码应用开发 高效构建业务系统

低代码是传统软件开发逐步优化和演变的产物&#xff0c;并非全新革命。传统的开发方法过于昂贵和僵化&#xff0c;无法为企业提供所需的高效和敏捷的开发流程&#xff0c;且交付周期长定制能力弱&#xff0c;难以应对不断变化的市场和客户期望&#xff0c;为提高软件开发效率&a…

Python - bool转int,用类型转换还是if-else?

说下结论&#xff0c;虽然直接用int强转的写法比较简洁&#xff0c;但是用if-else的效率更高&#xff08;规避了函数调用的开销&#xff09;。 举个栗子&#xff1a; lst [True, False]def a(a100000):starttime.time()for i in xrange(a):lst[0 if random.choice(lst) else …

PCL vtk 计算点云的体积和表面积

一、CC中计算体积和表面积 二、PCL中计算体积和表面积 vtkMassProperties 来计算体积和表面积&#xff0c;但是必须是三角化的模型&#xff0c;不能是多边形的模型 vtkTriangleFilter如果是其他模型的就转换为三角化的模型 // 计算点云的体积和表面积 // 输入的不能是点云&am…

限时等待

如果一个线程要等待的线程的目标没有实现&#xff0c;那么他会一直等下去&#xff0c;此时就陷入了阻塞等待。 还有一种等待状态叫做延时等待&#xff0c;如果如果我去吃饭&#xff0c;但是饭店已经客满&#xff0c;需要排号&#xff0c;当排到我号时&#xff0c;饭店会叫我&am…

持续挖掘助力创新,亚马逊云科技全新开启“创业加速器”第一期招募

就像人从婴儿开始成长&#xff0c;参天大树从嫩芽开始成长一样&#xff0c;所有成功的企业都是从几个人、初创团队起步发展的。例如&#xff0c;当今全球云计算的 Top 巨头亚马逊云科技&#xff0c;就是从亚马逊内部孵化出来的创业团队&#xff0c;亚马逊现任 CEO Andy Jassy&a…

查看windows上的dll内容

1、安装Visual Studio时选择c桌面开发和通用Windows平台开发 2、cmd运行在Visual Studio安装路径下的VC\Auxiliary\Build\vcvars64.bat 3、在这个窗口中运行dumpbin

【从零开始学习JAVA | 第二十七篇】JAVA期末练习(PTA)

目录 前言&#xff1a; R7-5 Count the letters in a string &#xff08;统计字符串中的字符&#xff09; R7-1 找素数 R7-3 电话号码同步&#xff08;Java&#xff09; 总结&#xff1a; 前言&#xff1a; 临近期末&#xff0c;我也更新一下PTA上的JAVA大题&#xff0c;希望…

TensorFlow项目练手(二)——猫狗熊猫的分类任务

项目介绍 通过猫狗熊猫图片来对图片进行识别&#xff0c;分类出猫狗熊猫的概率&#xff0c;文章会分成两部分&#xff0c;从基础网络模型->利用卷积网络经典模型Vgg。 基础网络模型 基础的网络模型主要是用全连接层来分类&#xff0c;比较经典的方法&#xff0c;也是祖先…

(c语言)给定两个数,求这两个数的最大公约数

目录 方法一 方法二&#xff1a;辗转相除法 方法一 找出两个数中的较小值&#xff0c;从较小值减至两个数%这个数0即可。 //给定两个数&#xff0c;求这两个数的最大公约数 #include <stdio.h>int main() {int a 0;int b 0;scanf("%d %d", &a, &…