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

Question

我有一些 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>

Answer 1

Z-index 不起作用，因为您的问题在于模板的定位方式，您可以看出这一点，因为只有右侧的元素被放置在正在放大的元素之上。

您应该从所有元素中删除“float:left”。然后通过给模板的父元素“display:inline-flex”定位模板