element的导航栏修改其选中时颜色的问题
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
修改element导航栏选中时的背景色,通过浏览器选中导航栏查看可知修改样式.el-menu-item.is-active即可。
于是……
.el-menu-item.is-active {
background: #247bb4 !important;
}
以为完事了吗?
不不不
正常使用时效果确实达到了
但是长时间闲置页面,再回头看这个页面时会出现
哪里来的灰色???
鼠标点击界面任意位置,灰色立马消失……
我……
疯狂百度,没人有这种情况
但是看到别人的代码如下:
.el-menu-item.is-active {
background-color: #247bb4 !important;
}
于是尝试着用background-color替换background
好像还真的OK了再也没出现过如上情况了
——————————————————————————————————
然后过了好几个月,发现这个现象还是存在
一次偶然的机会,被我捕获到了问题哈哈哈
莫名其妙这个时候会给当前元素加上background-color: rgb(204, 204, 204);
然后只要点击屏幕,瞬间这个值会变成background-color: rgba(0, 0, 0, 0.1);
所以,我只要给它默认设一下背景色就好了啊!!!
修改代码如下:
.el-menu-item {
background-color: rgba(0, 0, 0, 0.1) !important;
}
这次是真的OK了!!!
——————————————————————————————————
心塞啊心塞,这个还是没解决
因为直接强制修改el-menu-item的背景色,会导致想要它变色的时候变不了了啊啊啊,脑壳痛。
——————————————————————————————————
直接看最终样式修改
因为需要菜单透明,于是乎这么设置以后很久没有给我蒙上一层灰了。
<el-menu router class="el-menu-vertical-demo menu-Bar" background-color="rgba(36,123,180,0.51)" text-color="#b4dbf4" active-text-color="#7BE4FF">
<navMenu :navMenus="menuData"></navMenu>
</el-menu>
.el-menu-item {
background-color: rgba(0, 0, 0, 0.1);
}
.el-menu-item.is-active {
background-color: #247bb4 !important;
}
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:2 个月前 )
c345bb45
6 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 7 个月前
更多推荐
已为社区贡献5条内容
所有评论(0)