html - CSS Hover 错误，在悬停时叠加波动效果

Question

我正在尝试将一个覆盖 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,112,0.2);"><img src="thumb.png" height="60%;"></div>
	<div class="overlay"></div>

我在这里做错了什么？

Answer 1

这是因为.card 悬停时叠加层的z-index 会增加。但是现在您不再悬停在 .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,112,112,0.2);"><img src="thumb.png" height="60%;"></div>
<div class="overlay"></div>