javascript - 如何避免div动画形式落后于相对div？

我有几个div来扩展其包含的图像，以将其调整为更大的尺寸...悬停时。但是，当我这样做时，它们会落后于相对的div。我提供了一个gyazo gif，这是代码。

预先感谢任何可以提供帮助的人。我确实尝试过弄乱z-index，但我没有运气。

https://gyazo.com/13aabe5ecb2763a64f3c215fe207b05a?token=83f00c7326c06866638fdd590f78b9ea

	$(document).ready(function(){

		$(".temp_thumb_1").mouseenter(function(){


			$("#template_2_wrapper").css({
				"opacity" : '0'
			});

			$("#template_1_wrapper").animate({
				"width" : '628px',
				"height" : 'auto'
			});

			$(".temp_thumb_1").animate({
				"width" : '628px',
				"height" : 'auto'
			});

		});

		$(".temp_thumb_1").mouseleave(function(){

			$("#template_1_wrapper").animate({
				"width" : '157px',
				"height" : 'auto'
			});

			$(".temp_thumb_1").animate({
				"width" : '157px',
				"height" : 'auto'
			});

		});


		$(".temp_thumb_2").mouseenter(function(){

			$("#template_2_wrapper").animate({
				"width" : '628px',
				"height" : 'auto'
			});

			$(".temp_thumb_2").animate({
				"width" : '628px',
				"height" : 'auto'
			});


		});

		$(".temp_thumb_2").mouseleave(function(){

			$("#template_2_wrapper").animate({
				"width" : '157px',
				"height" : 'auto'
			});

			$(".temp_thumb_2").animate({
				"width" : '157px',
				"height" : 'auto'
			});

		});


			$(".temp_thumb_3").mouseenter(function(){

			$("#template_3_wrapper").animate({
				"width" : '628px',
				"height" : 'auto'
			});

			$(".temp_thumb_3").animate({
				"width" : '628px',
				"height" : 'auto'
			});


		});

		$(".temp_thumb_3").mouseleave(function(){

			$("#template_3_wrapper").animate({
				"width" : '157px',
				"height" : 'auto'
			});

			$(".temp_thumb_3").animate({
				"width" : '157px',
				"height" : 'auto'
			});

		});

	});
	

#templates_sec_1{
	width:76%;
	margin:0 auto;
	background-color:#d7d7d7;
	height:200px;
}

#template_1_display, #template_2_display, #template_3_display{
	width:157px;
	height:100px;
    background-repeat: no-repeat;
    background-size: contain, cover;
	margin:0 auto;
}



#template_1_text_wrapper{
	height:100px;
	width:100%;
	background-color:white;
}

#template_1_hover, #template_2_hover, #template_3_hover{
	width:157px;
	height:200px;
	float:left;
}

.temp_thumb_1, .temp_thumb_2, .temp_thumb_3{
	width:157px;
	height:auto;
}

#template_1_text{
	height:100px;
	width:157px;
	background-color:white;

<div id='templates_sec_1'>
	<div id='template_1_hover'>
			<div id='template_1_display'>
				<a href=''><img src='images/template_1_thumbnail.png' class='temp_thumb_1'></a>
			</div>
			<div id='template_1_text'>
			</div>
	</div>
	<div id='template_2_hover'>
			<div id='template_2_display'>
				<a href=''><img src='images/template_2_thumbnail.png' class='temp_thumb_2'></a>
			</div>
			<div id='template_1_text'>
			</div>
	</div>
	<div id='template_3_hover'>
			<div id='template_3_display'>
				<a href=''><img src='images/template_1_thumbnail.png' class='temp_thumb_3'></a>
			</div>
			<div id='template_1_text'>
			</div>
	</div>
</div>

最佳答案

Z-index不起作用，因为您的问题在于模板的放置方式，您可以知道这一点，因为仅将右边的项目放在正在放大的项目上。

您应该取消所有项目的“ float：left”。然后通过给模板的父元素“ display：inline-flex”放置模板