CSS属性页边距顶部：-带Jquery的10px动画会影响以下div，如何使它们固定？

我想做一个悬停效果，反弹一个图标，但下面有一个固定的阴影。 因此，我将Jquery与hover一起使用，并设置页边空白顶部的动画。 当图像块更改其边距顶部时，它会拖动阴影，这是怎么回事 如何将阴影固定在其位置

这是我的密码

<style>
#icons
{
list-style-type: none;
margin: 0px;
padding: 0px;
overflow: auto;
}
#icons li
{
float: left;
height: 170px;
padding: 10px 0px 0px 0px;
}
#icons li a.img_bounce
{
display: block;
border: 0px;
}

#icons li img.img_shadow
{
display: block;
border: 0px;

}


</style>

<script>
 jQuery(document).ready(function () {

jQuery("#icons a.img_bounce").hover(function(){
jQuery(this).stop().animate({opacity: 0.75, marginTop: -10}, 400);
},function(){
jQuery(this).stop().animate({opacity: 1.0, marginTop: 0}, 400);
});


});
</script>

<ul id="icons">
    <li><a href="" class="img_bounce"><img  alt="Firefox" src="Firefox.png"  width="128" height="128" style="opacity: 1; margin-top: 0px;"></a><img class="img_shadow" width="128" alt="Chrome" src="shadow.png"  style="opacity: 1; margin-top: 0px;"></li>
    <li><a href="" class="img_bounce"><img  alt="Firefox" src="Firefox.png"  width="128" height="128" style="opacity: 1; margin-top: 0px;"></a><img class="img_shadow" width="128" alt="Chrome" src="shadow.png"  style="opacity: 1; margin-top: 0px;"></li>
    <li><a href="" class="img_bounce"><img  alt="Firefox" src="Firefox.png"  width="128" height="128" style="opacity: 1; margin-top: 0px;"></a><img class="img_shadow" width="128" alt="Chrome" src="shadow.png"  style="opacity: 1; margin-top: 0px;"></li>
    <li><a href="" class="img_bounce"><img  alt="Firefox" src="Firefox.png"  width="128" height="128" style="opacity: 1; margin-top: 0px;"></a><img class="img_shadow" width="128" alt="Chrome" src="shadow.png"  style="opacity: 1; margin-top: 0px;"></li>

</ul>

它有效，但是。。原来的高度被修改了…不是原来的高度

---

因此，修改阴影的原始位置…在一次悬停之后…

一个非常快速的解决方案是同时在底部添加一些填充/边距。 刚才发生的事情是，因为您使用边距移动一个元素，那么其他元素将随着边距移动，因为它们与边距相对

---

如果在底部添加额外的填充/边距（一个或另一个），则阴影图像应保持在相同的位置。

我认为这可能对您有所帮助

地点：

演示：

---

旁注：图标是“ChromeFox”还是什么？

您可以简单地将

位置：相对
添加到
#图标li a.img_bounce
，然后设置
top
属性的动画，而不是
边距top

请参见：
您是否尝试过将页边距底部、填充底部或顶部图像设置为与向上移动div的量相等？没错，它可以。。。高度不是一个好主意，但海底是；）
on hover
    jQuery(this).stop().animate({opacity: 0.75, marginTop: -10,height:138}, 400);
on hover out
    jQuery(this).stop().animate({opacity: 0.75, marginTop: -10,height:128}, 400);