我们通常会遇到这种问题，特别是对于我这种前端小白，在导航栏鼠标放上去的时候，设置背景透明，结果里面的文字也变暗了，这是因为子元素的文字继承了父元素的属性了，那怎么办，用伪类设同级元素就好。
先贴代码，我的html
<div class="head">
<div class="width-keep">
<div class="logo"><img src="images/logo.png" alt=""></div>
<ul class="menu">
<li><a href="#">首页</a></li>
<li><a href="#">下载</a></li>
<li><a href="#">帮助中心</a></li>
<li><a href="#">天翼云盘</a></li>
</ul>
</div>
</div>
效果图，和鼠标放上去的时候背景变暗了，同时文字也看不清了。
此时在css上添加一个伪类before就可以解决这个问题，
.hover-effect::before {
content: "";
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: #000;
opacity: 0.2; }
然后用js实现鼠标移上去添加hover-effect这个类就可以了。