el-menu-item hover鼠标移入背景色

最新推荐文章于 2023-12-05 14:19:29 发布
最新推荐文章于 2023-12-05 14:19:29 发布
阅读量1.4w 收藏 11
点赞数 13
分类专栏： vue 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42661587/article/details/108616942
版权

像这种鼠标移入背景色很突兀，我想换一种。就要找到这两个类名的hover事件添加一下背景色就ok了

//父级的类名

.el-submenu__title:hover{

   background-color: rgb(3, 19, 33) !important; 

}

//子级的类名

.el-menu-item:hover {

  background-color: rgb(3, 19, 33) !important;

}

最后效果：

可爱小仙子
关注
  • 13
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
element 中 el-menu 组件的无限极循环思路代码详解
10-15
主要介绍了element 中 el-menu 组件的无限极循环,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
el-select-tree:ElementUI的el-select与el-tree结合
05-07
ElementUI的el-select与el-tree结合在一起。 在线示例 用法 安装 npm install --save el-select-tree 需要element-ui 如果您的项目不使用element-ui，则需要引入一个单独的element-ui包，如下所示： import 'el-...
el-menu导航鼠标移入背景色，字体颜色改变，及文字过长，显示省略号，鼠标悬停显示全文
qq_40011214的博客
02-18 1万+
一、上效果图 二、上代码 <template> <div class="about"> <el-menu default-active="2" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose" > <el-sub-menu index="1"> <templat
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 {
修改el-menu主菜单和子菜单悬浮的背景色
lannieZ的博客
04-07 1万+
/deep/.el-menu .el-menu-item:hover{ outline: 0 !important; color: #2E95FB !important; background: linear-gradient(270deg, #F2F7FC 0%, #FEFEFE 100%)!important; } /deep/.el-menu .el-menu-item.is-active { color: #2E95FB !important; backgro
更改element-ui中NavMenu导航栏中的hover背景色和字体色及边框线
最新发布
Y2960018173的博客
12-05 1836
【代码】更改element-ui中NavMenu导航栏中的hover背景色和字体色及边框线。
el-menu修改item颜色
bu_xiang_tutou的博客
03-20 3243
今天在在点击el-menu的一级菜单和二级菜单出现了点击成白色，刚好我设置的文字颜色也是白色，就变成什么都看不见了。但是当我使用，下面的代码去修改二级菜单的鼠标浮点事件的时候，我设置的背景颜色就只出现在我鼠标浮动的那个时刻。要设置二级菜单的触发背景颜色的时候，应使用项目的代码。
【修改el-menu主菜单和子菜单悬浮的背景色】
weixin_44995829的博客
10-18 9415
【修改el-menu主菜单和子菜单悬浮的背景色】
vue2+el-menu实现路由跳转及当前项的设置方法实例
08-28
要实现路由跳转，先要在 el-menu 标签上添加 router 属性，然后只要在每个 el-menu-item 标签内的 index 属性设置一下 url 即可实现点击 el-menu-item 实现路由跳转。例如： ```html <el-menu router :default-...
使用element-ui的el-menu导航选中后刷新页面保持当前选中状态
10-16
2. **`router`属性**：当设置为`true`时，`el-menu-item`和`el-submenu`可以通过`index`属性作为路由进行页面跳转。这样，当用户点击菜单项时，Vue Router会处理对应的路由变化。 3. **`unique-opened`属性**：如果...
el-table-infinite-scroll:El-Table无限滚动
05-26
element-ui 的表格与无限滚动的结合（el-table + infinite-scroll）。查看实例教程此指令依赖于 element-ui@2.12.0，使用前请熟悉：element-ui@2.12.0element-ui@2.12.0安装npm install --save el-table-infinite-...
解决vue中el-tab-pane切换的问题
10-15
在Vue开发过程中，Element UI库提供了丰富的UI组件，其中`el-tabs`组件用于实现标签页切换功能。在本文中，我们将深入探讨如何解决Vue中`el-tab-pane`切换时遇到的问题，以及如何优化和管理组件的渲染。 首先，问题...
el-table嵌套 el-form并且加正则校验
06-15
el-table 封装组件
el-date-picker 英文改中文.doc
11-18
https://blog.csdn.net/xuelang532777032/article/details/121287203,内有博客截图，方便没有vip的小伙伴下载
手动动态改变el-tabs标签页顺序
06-28
例如：tabs1、tabs2、tabs3、tabs4 tabs2改为tabs4（往后移）则顺序变为tabs1、tabs3、tabs4、tabs2； tabs4改为tabs2（往前移） 则顺序变为tabs1、tabs4、tabs2、tabs3。
el-menu设置选中项背景色和鼠标移上背景色；el-tab鼠标移上效果
weixin_63896561的博客
04-28 2152
/修改鼠标移动到表头时候字体颜色，默认淡蓝色。
el-menu怎么修改hover样式(使用deep)
qq_29184685的博客
05-06 2611
添加css（apiview） <el-menu mode="horizontal" class="apiview"> css .apiview:deep(.el-menu-item:hover){ background-color: #ffffff!important; color:var(--el-color-primary)!important; } .apiview:deep(.el-menu-item.is-active){ background-color:
elementUI增加自定义鼠标事件
m0_55230637的博客
05-27 205
.native
Element-ui使用el-menu垂直布局递归生成菜单及菜单折叠后hover报错Maximum call stack size exceeded的解决方案
qq_34452824的博客
06-04 5908
本文只介绍垂直布局(默认)下当菜单折叠(collapse)时，鼠标hover时出现Maximum call stack size exceeded的报错，若mode="horizontal"(水平布局)的报错可以参考下面两篇文章https://blog.csdn.net/qq_31126175/article/details/81875468 https://blog.csdn.net/qq_34172153/article/details/105177925 首先放上递归的代码，父组件: <
el-dropdown-menu-item:hover得样式
05-25
当鼠标悬停在 `el-dropdown-menu-item` 元素上时，可以添加一些样式来改变其外观。例如，可以使用 CSS 的 `:hover` 伪类来为其添加背景色、文本颜色、边框等样式。 以下是一个示例： ```css .el-dropdown-menu-item:hover { background-color: #f5f5f5; color: #333; border: 1px solid #ccc; } ``` 这将在鼠标悬停在 `el-dropdown-menu-item` 元素时，将其背景色改为灰色，文本颜色改为黑色，边框添加一条灰色实线。您可以根据需要自定义这些样式。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值