Html CSS悬停bug，悬停时叠加波动效果

我试图将一个覆盖div放置在另一个覆盖div上，以便在卡div上悬停时，在其上方显示覆盖div。但在悬停时，我不知道为什么会有一些bug在显示overlay div之前会产生波动效果

.overlay{
不透明度：0；
z指数：-2；
高度：290px；
宽度：240px；
背景：#000；
边界半径：30px；
/*显示：内联块*/
位置：相对位置；
顶部：-310px；
过渡：全部。4s轻松；
}
.卡：悬停+叠加{
不透明度：1；
z指数：1；
过渡：全部。4s轻松；
}

---

这是因为悬停

.card

会增加叠加的

z索引。但现在您不再将
.card
悬停，而是将
.overlay
悬停，因此它将消失。

要解决此问题，还应添加
.overlay:hover
样式：


.overlay{
不透明度：0；
z指数：-2；
高度：290px；
宽度：240px；
背景：#000；
边界半径：30px；
/*显示：内联块*/
位置：相对位置；
顶部：-310px；
过渡：全部。4s轻松；
}
.card:hover+.overlay，.overlay:hover{
不透明度：1；
z指数：1；
过渡：全部。4s轻松；
}
另一个想法是通过使用
指针事件：无，防止覆盖捕获事件（在本例中为悬停）以便不会丢失应用于卡的初始悬停：


.overlay{
不透明度：0；
z指数：-2；
高度：290px；
宽度：240px；
背景：#000；
边界半径：30px；
指针事件：无；
位置：相对位置；
顶部：-310px；
过渡：全部。4s轻松；
}
.卡：悬停+叠加{
不透明度：1；
z指数：1；
过渡：全部。4s轻松；
}
.卡片{
背景：红色；
高度：290px；
宽度：240px；
边界半径：30px；
显示：内联块；
利润率：20px；
盒影：0 2px 6px rgba（112、112、112、0.2）；
}

我认为如果你扭曲它们并使用
父元素：hover>.overlay
而不是像现在那样选择下一个元素（编辑：Coli的答案更好）会起作用。问题是你正在将另一个元素放在悬停的元素上-这使得你的鼠标光标现在停留在这个元素上，这意味着另一个不再处于悬停状态…将该覆盖作为触发元素的后代以避免出现这种情况。（悬停子元素始终自动意味着悬停祖先。）如果将覆盖层放在卡中，则可以将其绝对定位到卡中（因此不需要手动减号顶部）这将解决你的悬停问题这里有一个例子-更简单的方法将你的覆盖层排列在卡片的顶部：@Pete为什么你不把它作为一个答案？这也是一个很好的解决方案。但是你应该提到，
.overlay
上的每一个内容都是不可点击的。@coli已经说过：为了防止overlay捕捉事件，我认为这不够清楚，不能理解你不能再点击它的链接了。