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”来定位模板
推荐阅读
- css - FlatList中具有纵横比的中心项目 - React Native
- c++ - 是否可以为我们不知道参数数量和类型的函数动态创建和存储指针?
- c - 您可以使用 C 阵列“破解”窗口,还是以某种方式安全?
- azure - AzureAD MaxAgeSessionMultiFactor 不工作
- arrays - 将数字放入 AX 时,AH 中的数字错误
- c# - ASP.NET EF Core 使用外键插入多个表
- admob - AdMob - RewardedVideoAd - 没有可用视频时的最佳做法 (errorCode = 3)
- javascript - 反应路由器开关未按预期工作
- c# - 位图流到c#中的视频howto?
- java - 在包子目录中运行特定类的 main