覆盖element-ui的el-menu样式记录:背景图片、菜单图标、菜单高亮与鼠标悬浮高亮、调整子菜单等样式

在这里插入图片描述

页面中修改el-menu

设置background-color="transparent",menu菜单下的背景图片则能正常显示了

 <el-menuclass="el-menu-demo"mode="horizontal"background-color="transparent"><el-menu-item index="1"><img :src="require('~@assets/imgs/menu_logo_1.png')" />菜单1</el-menu-item><el-submenu index="2"><template slot="title"><img :src="require('~@assets/imgs/menu_logo_2.png')" />菜单2</template><el-menu-item index="2-1">子菜单1</el-menu-item><el-menu-item index="2-2">子菜单2</el-menu-item><el-menu-item index="2-3">子菜单3</el-menu-item></el-submenu><el-menu-item index="3"><img :src="require('~@assets/imgs/menu_logo_3.png')" />菜单3</el-menu-item><el-submenu index="4"><template slot="title"><img :src="require('~@assets/imgs/menu_logo_4.png')" />菜单4</template><el-menu-item index="3-1">子菜单</el-menu-item></el-submenu><el-menu-item index="5"><img :src="require('~@assets/imgs/menu_logo_5.png')" />菜单5</el-menu-item><el-submenu index="6"><template slot="title"><img :src="require('~@assets/imgs/menu_logo_6.png')" />菜单6</template><el-menu-item index="6-1"></el-menu-item><el-menu-item index="6-2"></el-menu-item><el-menu-item index="6-3"></el-menu-item></el-submenu><el-menu-item index="7"><img :src="require('~@assets/imgs/menu_logo_7.png')" />菜单7</el-menu-item></el-menu>

页面中加了scoped,使用穿透样式修改el-menu样式

/* menu子菜单区域 */
.el-menu--popup {/* 菜单偏上一点 */margin-top: 18px !important;border-radius: 6px !important;background-image: linear-gradient(0deg, #eafefc 0%, #a8e9e2 100%);padding: 10px 0px !important;.el-menu-item {color: #333333 !important;background-color: transparent !important;margin: 5px 10px;border-radius: 4px;transition-duration: 0s;}.el-menu-item:hover {color: #008d85 !important;background-color: #e9faf8 !important;filter: drop-shadow(0px 1px 0px #1dbea1);background-color: #ffffff;}.el-menu-item.is-active {color: #008d85 !important;background-color: #e9faf8 !important;filter: drop-shadow(0px 1px 0px #1dbea1);background-color: #ffffff;}
}/* menu子菜单区域添加箭头 */
.el-menu--popup.el-menu--popup-bottom-start::before {content: '';position: absolute;top: -15px; /* 控制箭头的位置 */left: 50%;transform: translateX(-50%);border-width: 8px;border-style: solid;border-color: transparent transparent #a7e9e1 transparent;
}

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

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

相关文章

【Python+Selenium学习系列5】Selenium特殊元素定位之-鼠标悬停操作

前言 Selenium模拟用户在浏览器中的操作&#xff0c;比如点击按钮。在某些场景下&#xff0c;我们需要模拟鼠标悬停的操作&#xff0c;来触发一些隐藏的元素。本文将介绍Python Selenium实现鼠标悬停操作。 鼠标悬停&#xff0c;即当光标与其名称表示的元素重叠时触发的事件&…

14.Webpack 简介以及使用

1. 概念&#xff1a; Webpack 是一个静态模块打包工具&#xff0c;从入口构建依赖图&#xff0c;打包有关的模块&#xff0c;最后用于展示你的内容 2. 静态模块&#xff1a; 编写代码过程中的&#xff0c;html&#xff0c;css&#xff0c; js&#xff0c;图片等固定内容的文件…

[java入门到精通] 11 泛型,数据结构,List,Set

今日目标 泛型使用 数据结构 List Set 1 泛型 1.1 泛型的介绍 泛型是一种类型参数&#xff0c;专门用来保存类型用的 最早接触泛型是在ArrayList&#xff0c;这个E就是所谓的泛型了。使用ArrayList时&#xff0c;只要给E指定某一个类型&#xff0c;里面所有用到泛型的地…

公众号IP白名单已添加服务器IP 122.88... 依然给出 40164 错误

公众号的IP白名单已添加 122.88... 依然给出 40164 错误。 {"errcode":40164,"errmsg":"invalid ip 122.88... ipv6 ::ffff:122.88..., not in whitelist rid: 65e85a07-458dfc0d-16003e03"} 解决方案&#xff1a; 一、检查 AppID 是否正确&…

STM32基本定时功能

1、定时器就是计数器。 2、怎么计数&#xff1f; 3、我们需要有一恒定频率的方波信号&#xff0c;再加上一个寄存器。 4、比如每来一个上升沿信号&#xff0c;寄存器值加1&#xff0c;就可以完成计数。 5、假设方波频率是100Hz&#xff0c;也就是1秒100个脉冲。…

【学习】DLA (Deep Layer Aggregation)

本研究是有由UC Berkeley的Trevor Darrell组发表于2018年CVPR。因为&#xff0c;工作中应用到CenterNet&#xff0c;文章中使用了DLA作为backbone&#xff0c;能够以较高的速度完成推理并维持较高的AP。 DLA文章&#xff1a;论文 DLA 在实际操作中&#xff0c;常常将高级特征…

机器学习-pytorch1(持续更新)

上一节我们学习了机器学习的线性模型和非线性模型的机器学习基础知识&#xff0c;这一节主要将公式变为代码。 代码编写网站&#xff1a;https://colab.research.google.com/drive 学习课程链接&#xff1a;ML 2022 Spring 1、Load Data&#xff08;读取数据&#xff09; 这…

学习Java的第六天

一、变量 1、变量的定义 在程序执行的过程中变量的值会发生变化&#xff0c;直白来说就是用来存储可变化的数据。从本质上讲&#xff0c;变量其实指的是内存中的一小块存储空间&#xff0c;空间位置是确定的&#xff0c;但是里面放置的值不确定。比如屋子里有多个鞋柜&#x…

2024年目标检测研究进展

YOLOv9 图片来源网络 YOLO相关的研究&#xff1a;https://blog.csdn.net/yunxinan/article/details/103431338

网络安全: Kali Linux 进行 SSH 渗透与防御

目录 一、实验 1.环境 2.nmap扫描目标主机 3.Kali Linux 进行 SSH 渗透 3.Kali Linux 进行 SSH 防御 二、问题 1.SSH有哪些安全配置 一、实验 1.环境 &#xff08;1&#xff09;主机 表1 主机 系统版本IP备注Kali Linux2022.4 192.168.204.154&#xff08;动态&…

【软考】单元测试

目录 1. 概念2. 测试内容2.1 说明2.2 模块接口2.3 局部数据结构2.4 重要的执行路径 3. 测试过程2.1 说明2.2 单元测试环境图2.3 驱动模块2.4 桩模块 4. 模块接口测试与局部数据结构测试的区别 1. 概念 1.单元测试也称为模块测试&#xff0c;在模块编写完成且无编译错误后就可以…

16.Git从入门到进阶

一.Git 初识 1. 概念&#xff1a; 一个免费开源&#xff0c;分布式的代码版本控制系统&#xff0c;帮助开发团队维护代码 2. 作用&#xff1a; 记录代码内容&#xff0c;切换代码版本&#xff0c;多人开发时高效合并代码内容 3. 如何学&#xff1a; 个人本机使用&#xf…

数据库中 SQL Hint 是什么?

前言 最近在调研业界其他数据库中 SQL Hint 功能的设计和实现&#xff0c;整体上对 Oracle、Mysql、Postgresql、 Apache Calcite 中的 SQL Hint 的设计和功能都进行了解&#xff0c;这里整理一篇文章来对其进行梳理&#xff0c;一是帮助自己未来回顾&#xff0c;加深自己的思…

Python之Web开发中级教程----搭建Git环境三

Python之Web开发中级教程----搭建Git环境三 多人分布式使用仓库操作实例 场景&#xff1a;开发者A&#xff0c;开发者B在同一个项目协同开发&#xff0c;修改同一个代码文件。开发者A在Win10下&#xff0c;开发者B在Ubuntu下。 1、开发者A修改提交代码 从GitHub: Let’s bu…

44岁「台偶一哥」成现实版「王子变青蛙」,育一子一女成人生赢家

电影《周处除三害》近日热度极高&#xff0c;男主角阮经天被大赞演技出色&#xff0c;最让人意想不到&#xff0c;因为该片在内地票房报捷&#xff0c;很多人走去恭喜另一位台湾男艺人明道&#xff0c;皆因二人出道时外貌神似&#xff0c;至今仍有不少人将两人搞混。 多年过去&…

11.Node.js入门

一.什么是 Node.js Node.js 是一个独立的 JavaScript 运行环境&#xff0c;能独立执行 JS 代码&#xff0c;因为这个特点&#xff0c;它可以用来编写服务器后端的应用程序 Node.js 作用除了编写后端应用程序&#xff0c;也可以对前端代码进行压缩&#xff0c;转译&#xff0c;…

Linux最小系统安装无法查看IP地址

1&#xff0c;出现原因 服务器重启完成之后&#xff0c;我们可以通过linux的指令 ip addr 来查询Linux系统的IP地址&#xff0c;具体信息如下: 从图中我们可以看到&#xff0c;并没有获取到linux系统的IP地址&#xff0c;这是为什么呢&#xff1f;这是由于启动服务器时未加载网…

《探索虚拟与现实的边界:VR与AR谁更能引领未来?》

引言 在当今数字时代,虚拟现实(VR)和增强现实(AR)技术正以惊人的速度发展,并逐渐渗透到我们的日常生活中。它们正在重新定义人与技术、人与环境之间的关系,同时也为各行各业带来了全新的可能性。然而,究竟是VR还是AR更有潜力改变未来?本文将围绕这一问题展开深入探讨。…

Unity ShaderGraph实现地面积水效果

先看看效果 右侧参数&#xff0c;能够控制水高&#xff0c;波纹的速度等&#xff0c;但是这个效果需要修改高度图和凹凸图&#xff0c;毕竟有些模型并不是平面&#xff0c;对于具有斜面的模型就需要修改贴图。 ShaderGraph如下

基于pytorch的视觉变换器-Vision Transformer(ViT)的介绍与应用

近年来&#xff0c;计算机视觉领域因变换器模型的出现而发生了革命性变化。最初为自然语言处理任务设计的变换器&#xff0c;在捕捉视觉数据的空间依赖性方面也显示出了惊人的能力。视觉变换器&#xff08;Vision Transformer&#xff0c;简称ViT&#xff09;就是这种变革的一个…