element&若依 菜单点击改变背景色

已于 2022-02-24 09:05:15 修改
阅读量3.2k 收藏
点赞数 2
文章标签： elementui vue.js
于 2022-02-24 09:04:35 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43029992/article/details/123103786
版权
本文详细讲解如何使用Element UI实现菜单点击时背景色和字体颜色的动态变化，重点在于复写激活状态的CSS样式，包括#app下的sidebar-container主题暗色模式下.el-submenu的激活效果。
摘要由CSDN通过智能技术生成

element&若依 菜单点击改变背景色

element只提供了激活时候改变字体的颜色
在这里插入图片描述
在这里插入图片描述
找到激活的菜单查看代码
从#app开始的，只能整个复写，加上激活的class： is-active
在这里插入图片描述
在这里插入图片描述

<style>
.el-submenu__title i{
  color: #e8e8e8 !important;
}
#app .sidebar-container .theme-dark .nest-menu .el-submenu .is-active > .el-submenu__title, #app .sidebar-container .theme-dark .el-submenu .el-menu-item.is-active{
  background-color: #00d3c4 !important;
}


</style>
热爱生活的废话篓子
关注
element自定义背景更换
weixin_45102212的博客
11-04 1390
最近的项目中需要自定义背景更换。可以在element官网查看使用方法，有2中方法，使用了第一种比较简单的，第二种自己尝试了开头没有继续。 在这里使用这个方法，在项目中新建一个js文件，并且全局引用 在这个element-variables.scss里面内容可以官网复制过来 /* theme color */ $--color-primary: #1890ff; $--color-success: #13ce66; $--color-warning: #ffba00; $--color-danger: #
Elementor入门 [07] 创建“我们的菜单”页面
邱哥有言
01-27 372
选择“Space between”，顾名思义，它会在元素之间创建空间，将第一个元素定位在列的顶部，将最后一个元素定位在列的底部。正如我们之前所做的那样，我们将为这些部分命名，以便我们可以在整个页面中快速导航。然后将鼠标悬停在模板上，然后单击插入，将其添加到您的页面。正如我之前提到的，CSS ID 应该在您的页面上只出现一次，因此重复的元素不会复制 ID ......。我们将从英雄部分开始，正如您从我们的设计中看到的那样，它包括两个标题、一个文本编辑器小部件和一个间隔小部件。在样式中，将颜色更改为罗勒。
Element NavMenu导航菜单的使用方法
10-15
主要介绍了Element NavMenu导航菜单的使用方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
菜单导航(鼠标点击那个菜单，那个菜单背景颜色改变)
06-23
菜单导航(鼠标点击那个菜单，那个菜单背景颜色改变)
若依框架自定义左侧导航栏图标，并变色
最新发布
huang_jimei的博客
06-26 894
若依框架自定义左侧导航栏图标
elementUI table选中后改变背景色（亲测有效，拿过来直接用）
Kimser
08-08 2054
代码： @row-click="rowClick"当某一行被点击时会触发该事件 :row-class-name="tableRowClassName" 可以通过指定 Table 组件的row-class-name属性来为 Table 中的某一行添加 class，表明该行处于某种状态。 :row-style="selectedHighlight" //设置这一行的样式 方法： tableRowClassName ({row, rowIndex}) { //把...
vue-element-admin左侧导航栏的背景颜色更改
changyana的博客
08-05 2485
使用vue-element-admin默认的导航栏是如下图颜色。想要更改背景颜色需要找到相应的配置文件。
el-submenu中.el-submenu__title选中后背景色不变
怡暘
07-07 4586
背景：人生中自己第一次搭建大项目，同样的也是第一次使用el-menu结构化界面，封装el-menu组件。在这个过程中遇到了一个选择el-submenu时候，只要鼠标移开背景色就会恢复原来的颜色，这个时候仅仅使用“.el-submenu__title:focus, .el-submenu__title:hover”设置背景色是不行的。通过查阅资料找到一个CSDN的小伙伴给出的建议思路，成就如下成果，成功解决问题。 .el-submenu.is-opened .el-submenu__title { b
element 侧边栏 点击后的子级和父级都显示颜色
wy271013的博客
08-25 613
【代码】element 侧边栏 点击后的子级和父级都显示颜色。
vue-element-admin左侧菜单背景色
09-14
你可以通过在vue-element-admin中的左侧菜单组件中设置背景色来改变其外观。具体的步骤如下： 1. 打开`/src/components/Sidebar/index.vue`文件。 2. 在`<style>`标签中，找到`.sidebar-container`类选择器。 3. ...
element-ui中点击菜单,改变当前菜单背景颜色
tumu6889的博客
05-13 1894
element-ui中点击菜单,改变当前菜单背景颜色 需求: vue项目中,点击左侧菜单,tags页显示当前打开的菜单,并且高亮显示当前菜单 实现效果: 实现代码:在vuex里面定义tags存放所有打开的菜单,和当前打开的索引curtagsIndex:,通过遍历tags,看是否等于当前索引 1.在store的index.js文件里面定义 tags 和 curtagsIndex const store = new Vuex.Store({ modules: { tags:[],
若依框架 sidebar.scss文件，左侧导航栏是渐变色
qq_45915072的博客
09-19 286
改这个地方。
若依框架修改左侧边栏颜色
m0_72809526的博客
03-01 1205
variables.scss包里面可以调背景颜色，文字颜色，图标颜色。ruoyi-ui包中src下的styles。点击图标之后变换的颜色。
elementUi侧边导航鼠标移入背景色，字体颜色改变
weixin_44348028的博客
09-19 6030
/* 改变elementui 侧边栏移入颜色 */ .el-menu-item:hover{ background: #1c88cf!important; color: #fff!important; } .el-submenu__title:hover { background: #1c88cf!important; color: #fff!important; } .el-menu-item.is-active { background: #1c88cf!impo
若依管理平台PC端如何增加新的字体图标,并且在侧边栏点击切换路由时改变字体图标颜色
W78955的博客
09-26 2366
若依后台管理框架遇到的字体图标使用问题
el-menu设置选中项背景色和鼠标移上背景色；el-tab鼠标移上效果
weixin_63896561的博客
04-28 2298
/修改鼠标移动到表头时候字体颜色，默认淡蓝色。
vue---el-menu-item更改导航菜单栏选中的背景颜色
weixin_44753918的博客
03-25 2108
【代码】vue---el-menu-item更改导航菜单栏选中的背景颜色。
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式
热门推荐
Sabrina_cc的博客
07-20 7万+
【Vue项目搭建】修改【若依框架】的侧边栏、导航栏、面包屑样式、修改全局页面样式
elementUI 通过cs悬浮字体及导航栏变色
半壁江山009的博客
02-07 1745
在使用vue和elementUI简单开发的时候，经常需要在字体或者边栏 悬停时，让字体或者栏背景色变色，从而使用户能清晰的知道目前的浏览的位置 本文以侧边栏目录字体与栏背景变色为例子： 效果如下： css主要代码： & .el-submenu .el-menu-item { //侧边栏的位置 min-width: $sideBarWidth !important; //侧边栏宽度 background-color: $subMenuBg !important; //
修改若依框架背景颜色
08-23
要修改若依框架的背景颜色，您可以按照以下步骤进行操作： 1. 在您的项目中，找到若依框架的源代码文件（通常位于/src/main/resources/static/下）。 2. 在资源文件中，找到对应的CSS文件。若依框架通常使用多个CSS文件来定义不同的样式，您需要找到主要用于设置框架样式的CSS文件。 3. 在该CSS文件中，找到用于设置背景颜色的样式类或选择器。通常，这个样式类或选择器可能是".wrapper"、".content-wrapper"等。 4. 在对应的样式类或选择器中，添加或修改"background-color"属性，并为其指定您想要的背景颜色值。例如，如果您想要将背景颜色改为红色，可以使用以下代码： ``` .wrapper { background-color: red; } ``` 5. 保存并重新编译/部署您的项目。 完成上述步骤后，若依框架的背景颜色应该已经修改成功了。请注意，具体的修改步骤可能会因您使用的若依版本而有所不同，请参考若依框架的文档或相关资源进行进一步了解。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值