效果

选择前
鼠标放置后

ps：可能图片颜色有点...umm特别可能看不出来

大体实现

三个内容的宽度为100%，这样屏幕就会均分三部分。然后将遮罩宽度也设为100%均分，为了让其“盖”在内容上面，需要将遮罩的父div设置成absolute，当然其宽度和高度要和内容一样，最后再设置鼠标的事件监听就好了。

令人困惑的事情

如果你按照我上面所说的思路实现，你会发现：

如白框多出了一点
尼玛这是为什么？？？都是设的100%，按道理应该也是一样平分三等分。再按f12看看宽度
内容宽度高度
遮罩的宽度和高度
可以看到这里遮罩的宽度就比内容大了16，还多了一个left right的值，这尼玛是为什么。
百度啊当然是百度（我发誓不用谷歌，谁叫谷歌反华呢！）
链接，感谢这位博主的解答
博客中开头就提到
所以我们只要把遮罩的父布局设成relative就好了。

大概的源码

<div class="main">
    <div class="content_main">
      <div v-for="item in title" v-bind:class="item.mclass" v-bind:key="item.text" v-on:mouseenter="mouseover(item)">
        <span class="title">{{item.text}}</span>
      </div>
    </div>
    <div class="mask_main" v-if="showMask">
      <div v-for="item in title" v-bind:class="{mask_item_select: item.active ,mask_item_unselect: !item.active}" v-bind:key="item.text" v-on:mouseleave="mouseout(item)"></div>
    </div>
  </div>

.content_main{
    display: flex;
    width: 100%;
    height: 1000px;
    position: relative;
  }
.mask_main {
    position: absolute;
    width: 100%;
    height: 1000px;
    display: flex;
  }

ps: 遮罩的父布局也要同时隐藏，因为对内容用的是mouseenter，对显示出来的遮罩用mouseleave。如果不把遮罩的父布局隐藏，会无法触发内容的mouseenter（被遮罩父布局挡住了）。这种做法好像很奇怪，有更好的可留言。

后话

刚玩前端呢，想试写game/anime/manga的网站，先把Android放下（分手吧！）。