html – CSS悬停bug,覆盖悬停时的波动效果

我试图将一个叠加div放在另一个上面,以便悬停在卡片div上方显示叠加div.但是在悬停时,我不知道为什么会出现一些在显示叠加div之前产生波动效果的错误.

.overlay {
	opacity: 0;
	z-index: -2;
	height: 290px;
	width: 240px;
	background: #000;
	border-radius: 30px; 
	/*display: inline-block;*/
	position: relative;
	top: -310px;
	transition: all .4s ease;
}
.card:hover + .overlay {
	opacity: 1;
	z-index: 1;
	transition: all .4s ease;
}

<div class="card" style="background: #fff; height: 290px; width: 240px; border-radius: 30px; display: inline-block; margin:20px; box-shadow: 0 2px 6px rgba(112,112,0.2);"><img src="thumb.png" height="60%;"></div>
	<div class="overlay"></div>

我在这做错了什么？

解决方法

那是因为覆盖的z-index通过悬停.card而增加.但是现在你不再徘徊.card,你正在徘徊.overlay,所以它消失了.
要解决此问题,您还应添加.overlay：hover样式：

.overlay {
	opacity: 0;
	z-index: -2;
	height: 290px;
	width: 240px;
	background: #000;
	border-radius: 30px; 
	/*display: inline-block;*/
	position: relative;
	top: -310px;
	transition: all .4s ease;
}
.card:hover + .overlay,.overlay:hover {
	opacity: 1;
	z-index: 1;
	transition: all .4s ease;
}

<div class="card" style="background: #fff; height: 290px; width: 240px; border-radius: 30px; display: inline-block; margin:20px; box-shadow: 0 2px 6px rgba(112,0.2);"><img src="thumb.png" height="60%;"></div>
<div class="overlay"></div>