iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >el-menu修改item颜色的实现
  • 180
分享到

el-menu修改item颜色的实现

el-menuitem颜色el-menu菜单颜色 2023-05-15 17:05:08 180人浏览 薄情痞子
摘要

本文主要介绍了el-menu修改item颜色的实现,具体如下:  今天在在点击el-menu的一级菜单和二级菜单出现了点击成白色,刚好我设置的文字颜色也是白色,就变成什么

本文主要介绍了el-menu修改item颜色的实现,具体如下:

 今天在在点击el-menu的一级菜单和二级菜单出现了点击成白色,刚好我设置的文字颜色也是白色,就变成什么都看不见了。

//设置一级菜单和二级菜单的背景颜色
.el-sub-menu .el-menu-item {
  background-color: RGB(38,87,227) !important;
}
//设置选鼠标指针浮动在一级菜单的设置
.el-menu-item:hover{
  background-color: aqua !important;;
}
//设置当前被选中的一级菜单
.el-menu-item.is-active {  
  color: #fff !important;  
  background: black !important;  
}  
 

但是当我使用,下面的代码去修改二级菜单的鼠标浮点事件的时候,我设置的背景颜色就只出现在我鼠标浮动的那个时刻。

.el-sub-menu:hover{
  background-color: aqua !important;;
}

要设置二级菜单的触发背景颜色的时候,应使用项目的代码

.el-sub-menu:hover{
  background-color: aqua !important;;
}
.el-sub-menu__title:focus, .el-sub-menu__title:hover{  
  background-color: aqua !important;;
} 

到此这篇关于el-menu修改item颜色的实现的文章就介绍到这了,更多相关el-menu修改item颜色内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: el-menu修改item颜色的实现

本文链接: https://www.lsjlt.com/news/209346.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • el-menu修改item颜色的实现
    本文主要介绍了el-menu修改item颜色的实现,具体如下:  今天在在点击el-menu的一级菜单和二级菜单出现了点击成白色,刚好我设置的文字颜色也是白色,就变成什么...
    99+
    2023-05-15
    el-menu item颜色 el-menu菜单颜色
  • el-menu怎么修改item颜色
    这篇文章主要介绍了el-menu怎么修改item颜色的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇el-menu怎么修改item颜色文章都会有所收获,下面我们一起来看看吧。具体效果如下: 今天在在点击...
    99+
    2023-07-06
  • pyqt qlistwidget改变item颜色的操作
    我就废话不多说了,大家还是直接看代码吧~ 实例: from PyQt5 import QtCore, QtGui, QtWidgets from PyQt5.QtCore imp...
    99+
    2024-04-02
  • Vue中el-menu-item实现路由跳转的完整步骤
    目录场景:方法如下:补充:el-menu-item 实现水平导航栏,路由的跳转总结场景: 用了element-ui的el-menu 菜单 怎样实现路由跳转呢? 方法如下: 1,在e...
    99+
    2024-04-02
  • element-ui修改el-form-item样式的详细示例
    目录form结构修改el-form-item所有样式只修改label只修改content只修改input只修改button总结form结构 <el-form :model="f...
    99+
    2022-11-16
    修改el-form-item样式 element ui美化 element-ui教程
  • vue实现el-menu和el-tab联动的示例代码
    vue通过el-menus和el-tabs联动,实现点击侧边栏,页面内显示一行tab以及点击tab切换路由 实现效果如下 实现思路 左侧边栏添加点击事件/设置el-menu的路由...
    99+
    2023-05-15
    el-menu和el-tab联动 el-menu el-tab
  • el-menu动态加载路由的实现
    先看需要实现的效果 这里有一级也有二级菜单,注意二级菜单的父目录(”选项设置“点击不会跳转,只是展开目录),然后点击去详情页,需要跳到一个隐藏的路由,不在菜...
    99+
    2023-05-15
    el-menu动态加载路由 el-menu动态路由
  • datagrid怎么修改列的颜色
    要修改DataGrid列的颜色,可以使用DataGrid的CellStyle属性来设置列的样式。可以通过以下两种方法来达到目的:方法...
    99+
    2023-08-14
    datagrid
  • CSS修改placeholder颜色的方法
    小编给大家分享一下CSS修改placeholder颜色的方法,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!方法:先使用“::placeholder”选择器选中需要修改的元素;然后给该元素添加“color:颜色值;”样式即可...
    99+
    2023-06-14
  • css实现点击改变颜色的方法
    本篇文章和大家了解一下css实现点击改变颜色的方法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一种定义样式结构...
    99+
    2023-06-14
  • OpenCV实现更改图片颜色功能
    原图效果: 更改颜色后效果: 直接上源码: #include <opencv2/opencv.hpp> #include <iostream> #incl...
    99+
    2024-04-02
  • R ggplot2 修改默认颜色的操作
    我们都知道ggplot2包是R的神器,很多生物学文章都选择用这个包来画图。用ggplot2就像玩俄罗斯方块一样,一层一层地往上叠加元素,这使得它用起来很方便。 个人觉得它默认的配色系...
    99+
    2024-04-02
  • css如何修改超链接的颜色
    这篇文章主要介绍css如何修改超链接的颜色,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css修改超链接颜色的方法:1、通过“a:link”修改超链接颜色;2、通过“a:visited”改颜色;3、通过“a:hove...
    99+
    2023-06-14
  • Vue el-menu 左侧菜单导航功能的实现
    目录引言一级菜单实现最简单的一级菜单设置菜单背景颜色和文字颜色设置选中后菜单文字颜色在菜单中加入图标二级菜单实现二级菜单修改分析【其实很简单】:三级菜单实现三级菜单实现点击菜单跳转小...
    99+
    2024-04-02
  • html下划线颜色的修改方法
    这篇文章将为大家详细讲解有关html下划线颜色的修改方法,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。方法:1、给元素设置“text-decoration:underline;color:颜色值”样式即可...
    99+
    2023-06-15
  • 纯css如何实现更改图片颜色
    这篇文章主要介绍纯css如何实现更改图片颜色,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!css是什么意思css是一种用来表现HTML或XML等文件样式的计算机语言,主要是用来设计网页的样式,使网页更加美化。它也是一...
    99+
    2023-06-08
  • 超链接字体颜色的修改方法
    小编给大家分享一下超链接字体颜色的修改方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!超链接字体颜色的修改方法:首先新建一个html代码文件;然后通过给超链接加...
    99+
    2023-06-14
  • el-menu递归实现多级菜单组件的示例
    目录1. 效果:2. 实现:3. 使用组件:1. 效果: 2. 实现: 创建外层菜单AsideMenu.vue组件和子菜单项AsideSubMenu.vue组件,在AsideS...
    99+
    2023-05-15
    el-menu多级菜单 el-menu递归菜单
  • Android Button修改背景颜色及实现Button水波纹效果
    Android Button修改背景颜色及实现Button水波纹效果,效果如下:   以下基于API33(Android13.0),向下兼容至API24(Android7.0)。 1.修改Button背景 我们可以发现在布局xml文件中...
    99+
    2023-09-12
    android
  • element修改form的el-input宽度,el-select宽度的方法实现
    自从用了element-ui,确实好用,该有的组件都有,但是组件间的样式都固定好了,有时候像form表单这样,页面的input、select等宽度不一定会是一样的,可能有些长,有些短...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作