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

概述我试图将一个叠加div放在另一个上面,以便悬停在卡片div上方显示叠加div.但是在悬停时,我不知道为什么会出现一些在显示叠加div之前产生波动效果的错误. .overlay { opacity: 0; z-index: -2; height: 290px; width: 240px; background: #000; border-radius: 30px; /*display 我试图将一个叠加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  ><img src="thumb.png" height="60%;"></div>	<div ></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  ><img src="thumb.png" height="60%;"></div><div ></div>

总结

以上是内存溢出为你收集整理的html – CSS悬停bug,覆盖悬停时的波动效果全部内容，希望文章能够帮你解决html – CSS悬停bug,覆盖悬停时的波动效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。