el-menu怎么修改hover样式(使用deep)

阿眠

已于 2022-05-06 09:55:06 修改

阅读量2.8k

点赞数

文章标签： css css3 vue.js

于 2022-05-06 09:52:22 首次发布

本文链接：https://blog.csdn.net/qq_29184685/article/details/124603369

版权

添加class（apiview）

<el-menu mode="horizontal" class="apiview">

css

.apiview:deep(.el-menu-item:hover), .apiview:deep(.el-menu-item.is-active){
    background-color: #ffffff!important;
    color:var(--el-color-primary)!important;
}

在这里插入图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

阿眠

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

使用el-menu做侧边栏导航遇到需要点击两次菜单才展开

qq_37635012的博客

06-27

1799

如上图，在我第一次点击选中“告警管理”这个菜单的时候，外联监测它会立马收缩起来，当我第二次点击时就不会收缩，而是展开状态，这是因为我的el-menu里default-active和el-submenu的index及el-menu-item的index属性不一致导致的，

Vue3 - Element Plus 下拉选择器 el-select 覆盖修改 placeholder样式，解决覆盖不生效问题（支持修改文字颜色、文字大小、选择器边框、hover效果、宽高等任意样式

王佳斌

03-23

3603

vue3，element-plus，el-select，下拉选择器，下拉选择框，Select选择器，deep覆盖无效怎么办，怎么修改placeholder文字颜色，选择器select修改边框样式，修改文字大小，elementPlus选择器如何覆盖hover效果，使用deep改不了样式，修改边框颜色，select去掉边框，vue3+elementPlus中select选择器如何修改placeholder文字样式，修改el-select样式，select选择器样式覆盖不了咋办，el-select如何覆盖原样式，

参与评论您还未登录，请先登录后发表或查看评论

从0开始搭建后台管理系统-03（自定义主题）

grx1125的博客

08-22

565

在官网、后台管理、文档页等长时间浏览的页面，都会内置多套样式。可以缓解视觉疲劳、审美疲劳。主题最基本就是明亮和黑暗，一个日间使用一个夜间使用，当然也可以写几套活力一点的颜色。本篇文章介绍如何在vue中使用自定义主题。

element的 menu样式修改包含hover

m0_49014616的博客

09-03

1万+

element的 menu样式修改包含hover 1.修改主菜单的背景色等，直接再标签上写所需背景色，比如： 2.修改子菜单的背景色 .el-menu-item { background-color: #333 !important; } 3.鼠标悬浮时，子菜单的样式： .el-menu-item:hover{ outline: 0 !important; color: #409EFF !important; } .el-menu-item.is-active {

Vue3+ElementPlus 实现动态菜单

热门推荐

qq_42661587的博客

09-16

1万+

像这种鼠标移入背景色很突兀，我想换一种。就要找到这两个类名的hover事件添加一下背景色就ok了 //父级的类名 .el-submenu__title:hover{ background-color:rgb(3,19,33)!important; } //子级的类名 .el-menu-item:hover{ background-color:rgb(3,19,33)!important; } 最后效果： ...

修改el-menu样式

qq_50386946的博客

11-02

2163

【代码】修改el-menu样式。

element ui中侧导航栏el-menu修改颜色＜template slot=“title“＞分组一＜/template＞(菜单标题)无法修改问题

qq_38916157的博客

11-18

5249

template中 <el-submenu index="2"> <template slot="title"> 订单</template> <el-menu-item index="2-1">订单管理</el-menu-item> <el-menu-item index="2-2">订单详情</el-menu-item> </el-subme

el-cascader-panel级联面板

weixin_53917307的博客

03-29

3804

1、菜单收起鼠标离开面板收起 .el-cascader-panel.is-bordered { border: 0; &:hover { .el-scrollbar.el-cascader-menu:nth-child(2), .el-scrollbar.el-cascader-menu:nth-child(3) { display: inline; } } .el-scrollbar.el-...

使用element-ui的el-menu导航选中后刷新页面保持当前选中状态

10-16

主要介绍了使用element-ui的el-menu导航选中后刷新页面保持当前选中状态，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下

修改element的菜单组件使其变为酷炫风格

nick_zhang的博客

11-10

1299

首先选给整个头部加背景图，其次munu中配置的background是对所有菜单都生效的，但我们不想改变父菜单，我们就把父菜单修改为transparent，最后为了让父菜单hover时产生平行四边形，利用伪元素配合 transform: skewX(-45deg)，并且因为父元素时透明的，所以加z-index:1让图形显示出来。

【修改el-menu主菜单和子菜单悬浮的背景色】

weixin_44995829的博客

10-18

1万+

【修改el-menu主菜单和子菜单悬浮的背景色】

vue更改element菜单组件el-menu为横向展开状态

weixin_44100002的博客

01-28

1万+

更改组件为横向展开后可以实现类似商品分类的样式，并且触发菜单展开的方式为点击，el-menu组件collapse参数

::v-deep和&:hover的含义

qq_52526079的博客

12-01

368

来避免父组件对子组件的影响，添加了之后只能修改当前组件的样式，但同样引发不能在当前组件修改子组件的样式，因此就出现了深度选择器 ::v-deep。vue项目中经常在style 标签内添加。二. ::v-deep的含义。一.&:hover的含义。

修改element中el-menu的默认样式

NanghKing的博客

02-22

1502

/* 定制el-menu样式 */ .clearfix >>> .el-menu { border-radius: 5px; overflow: hidden; background-color: #2381df; } .clearfix >>> .el-menu-item { background-color: #2381df !important; } .clearfix >>> .el-menu-item:hove...

修改element-admin侧边栏

weixin_43972428的博客

10-24

379

经过以上步骤即可实现对element-admin侧边导航栏样式的修改。来自项目开发中稀奇古怪的需求。

el-menu设置选中项背景色和鼠标移上背景色；el-tab鼠标移上效果

weixin_63896561的博客

04-28

2401

/修改鼠标移动到表头时候字体颜色，默认淡蓝色。

el-menu加hover事件

09-15

在el-menu上添加hover事件的方法如下：给.el-menu-item元素添加:hover选择器，并在其中设置所需的样式即可。例如，可以使用以下代码来改变鼠标悬浮时子菜单的样式： ``` .el-menu-item:hover { outline: 0 !important; color: #409EFF !important; } ``` 对于主菜单的样式，可以使用以下代码： ``` .el-submenu__title:hover { outline: 0 !important; color: #409EFF !important; background: none !important; } ``` 如果你想修改菜单的背景色，可以直接在对应元素上设置所需的背景色。例如，要修改主菜单的背景色，可以在.el-menu上直接写入背景色，如下所示： ``` .el-menu { background-color: #333 !important; } ``` 如果要修改子菜单的背景色，可以使用以下代码： ``` .el-menu-item { background-color: #333 !important; } ```