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

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

先贴代码，我的html

    

      

          

            
首页
            
下载
            
帮助中心
            
天翼云盘
          
 
     
  

效果图，和鼠标放上去的时候背景变暗了，同时文字也看不清了。

此时在css上添加一个伪类before就可以解决这个问题，

.hover-effect::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: #000;
  opacity: 0.2; }

然后用js实现鼠标移上去添加hover-effect这个类就可以了。