实现鼠标悬停在上面会有一个遮罩效果

我的需求是这样的，鼠标悬停在logo上会有一个很浅的变白效果以便和其它地方区分开，或许你会说直接css上hover选择器里换个颜色不就好了，但是因为我这个是能挑选颜色的所以我就放弃了这种方法，所以这个时候我们就需要加上一个div

 <div v-if="isCollapse" class="logo-wrapper fl" style="width: 64px;">
  <div class="cover"></div>
  <span class="logo">S</span>
 </div>

  .logo-wrapper .cover {
    height: 64px;
  }

  .logo-wrapper:hover .cover {
    background-color: #fff;
    opacity: 0.1;
  }

  .logo-wrapper .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 101;
    font-size: 20px;
    color: #fff;
  }

千万要注意的是，任何东西都不要放在cover里面，因为opacity是可继承的，并且没有任何办法取消它，所以在这里我的子元素只能用绝对定位脱离文档流了

这是最终的效果~