Javascript jquery简单覆盖闪烁问题

当用户将鼠标悬停在按钮上时，我在页面上显示了一个简单的覆盖图，但问题是它一直在闪烁。我认为这是一个时间问题，所以我尝试给它不同的淡出和淡出时间，但这也没有帮助

$（文档）.ready（函数（）{
$（“.container”）.hover（函数（）{
console.log（'test'）；
$（“.overlay”）.fadeIn（）；
}，函数（）{
$（“.overlay”）.fadeOut（）；
});
});
.overlay{
显示：无；
位置：固定；
填充：0；
保证金：0；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,3）；
不透明度：.8；
}
.btn{
背景颜色：灰色；
颜色：#fff；
填充：14px；
}

测试
问题在于，您的覆盖是容器的同级，因此当您将鼠标移到容器上时，覆盖会淡入，一旦在容器中淡入，就再也看不到鼠标，并开始悬停的淡出部分。如果在容器内移动覆盖层，那么当您将鼠标移到容器上时，当容器淡入时，鼠标仍会注册，并且您不会陷入闪烁循环


$（文档）.ready（函数（）{
$（“.container”）.hover（函数（）{
console.log（'test'）；
$（“.overlay”）.stop（）.fadeIn（）；
}，函数（）{
$（“.overlay”）.stop（）.fadeOut（）；
});
});
.overlay{
显示：无；
位置：固定；
填充：0；
保证金：0；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,3）；
不透明度：.8；
}
.btn{
背景颜色：灰色；
颜色：#fff；
填充：14px；
}

测试
问题在于，您的覆盖是容器的同级，因此当您将鼠标移到容器上时，覆盖会淡入，一旦在容器中淡入，就再也看不到鼠标，并开始悬停的淡出部分。如果在容器内移动覆盖层，那么当您将鼠标移到容器上时，当容器淡入时，鼠标仍会注册，并且您不会陷入闪烁循环


$（文档）.ready（函数（）{
$（“.container”）.hover（函数（）{
console.log（'test'）；
$（“.overlay”）.stop（）.fadeIn（）；
}，函数（）{
$（“.overlay”）.stop（）.fadeOut（）；
});
});
.overlay{
显示：无；
位置：固定；
填充：0；
保证金：0；
排名：0；
左：0；
宽度：100%；
身高：100%；
背景：rgba（0,0,0,3）；
不透明度：.8；
}
.btn{
背景颜色：灰色；
颜色：#fff；
填充：14px；
}

测试
有更好的方法吗？我不能将覆盖作为子元素。我需要它是一个兄弟，您可以尝试添加
指针事件：无覆盖CSS规则有更好的方法吗？我不能将覆盖作为子元素。我需要它是一个兄弟，您可以尝试添加
指针事件：无到覆盖CSS规则