mouseenter/mouseleave多次触发fadeIn/fadeOut问题

在一次使用使用mouseenter/mouseleave实现显示/隐藏操作的时候发现会多次触发fadeIn/fadeOut,

效果如下图：

每次会累计触发fadeIn/fadeOut

代码如下

css：

div {
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    border: 1px solid #999;
}

div:nth-of-type(2n) {
    background: lightpink;
}

.mask {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%);
}

div:hover {
    background: lightblue;
}

html：

<div class="mouse-list">1</div>
<div class="mouse-list">2</div>
<div class="mouse-list">3</div>
<div class="mouse-list">4</div>
<div class="mou