设置背景透明时里面内容内容模糊（已解决）

我们通常会遇到这种问题，特别是对于我这种前端小白，在导航栏鼠标放上去的时候，设置背景透明，结果里面的文字也变暗了，这是因为子元素的文字继承了父元素的属性了，那怎么办，用伪类设同级元素就好。

先贴代码，我的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这个类就可以了。