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怎么修改hover样式(使用deep)
qq_29184685的博客
05-06 2651
添加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:
修改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的 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 {
更改element-ui中NavMenu导航栏中的hover背景色和字体色及边框线
最新发布
Y2960018173的博客
12-05 1913
【代码】更改element-ui中NavMenu导航栏中的hover背景色和字体色及边框线。
el-menu修改item颜色
bu_xiang_tutou的博客
03-20 3270
今天在在点击el-menu的一级菜单和二级菜单出现了点击成白色，刚好我设置的文字颜色也是白色，就变成什么都看不见了。但是当我使用，下面的代码去修改二级菜单的鼠标浮点事件的时候，我设置的背景颜色就只出现在我鼠标浮动的那个时刻。要设置二级菜单的触发背景颜色的时候，应使用项目的代码。
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
【修改el-menu主菜单和子菜单悬浮的背景色】
weixin_44995829的博客
10-18 9504
【修改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-menu设置选中项背景色和鼠标移上背景色；el-tab鼠标移上效果
weixin_63896561的博客
04-28 2181
/修改鼠标移动到表头时候字体颜色，默认淡蓝色。
elementUI增加自定义鼠标事件
m0_55230637的博客
05-27 211
.native
Element-ui使用el-menu垂直布局递归生成菜单及菜单折叠后hover报错Maximum call stack size exceeded的解决方案
qq_34452824的博客
06-04 5934
本文只介绍垂直布局(默认)下当菜单折叠(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 首先放上递归的代码，父组件: <
Vue中使用el-menu，点击二级菜单时一级图标保持高亮
Oamnij的博客
09-24 8305
Vue中使用el-menu，点击二级菜单时一级图标保持高亮一、案例二、使用步骤1.引入库2.使用el-menu总结 前言 自己在写项目的时候，写到菜单栏，发现只有一级菜单的时候，切换一级菜单的图标高亮很容易，但是在一级菜单下还有二级菜单的时候，点击二级菜单时，一级菜单的图标不能实现高亮。了解了一下发现el-menu没有这个功能，苦思冥想，自己找到了一个方法，记录一下。 一、案例 话不多说，先直接上图 二、使用步骤 1.引入库 在main.js中引入ElementUI组件，代码如下（示例）： impor
vue 鼠标移入移出事件（移入出现按钮），element-ui表格移入移出
热门推荐
weixin_42418774的博客
12-10 2万+
效果图： 注：@mouseenter="enter(index)" @mouseleave="leave()" 重点 <div class="img_box"> <div v-for="(img,index) in photoData" class="demo-image__preview" @mouseenter="enter(index)...
el-dropdown 下拉菜单 结合JQ做鼠标移入显示 移出隐藏事件
zhang_gt的博客
04-21 2020
鼠标移入显示下拉菜单按钮,移出隐藏下拉菜单按钮功能实现
element ui el-menu组件
m0_63466615的博客
02-10 3355
1.组件需要先写在<el-menu></el-menu>里面 2.一点此单就能显示东西或进入路由的就用 <el-menu-item></el-menu-item>实现 3.点了展开下一级菜单的要写在 <el-submenu> <template slot=‘title’>标题文本</template> <el-menu-item></el-menu-item> </el-subme
element-plus中el-sub-menu样式修改
RainHg的博客
07-05 9896
elementplus菜单样式修改
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、付费专栏及课程。

余额充值