Javascript 避免jQuery悬停时div的移位

我有几个正方形挨着一个。在悬停时，我希望方块的宽度增加（位于下一个div的上方），而不是移动其左侧的所有方块。我使用jQuery实现以下目的：

$('.' + c).hover(//'c' is my variable class :`.alpha1` / `.alpha2` / `.alpha3`
    function () {$(this).animate({height:"30%"},500);},
    function () {$(this).animate({height:"22.2287%"},500);});//original height

它工作得很好，但移动了箱子。移除悬停后，所有方块都将自身重置为原始状态

我的CSS

.box

类：

.boxes,.alpha1 ,.alpha2, .alpha3{
background:rgba(0, 0, 0, .30);
    float:left;
    overflow:hidden;
    width:6.36896%;
    height:22.2287%;
    margin:2px;
    box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -moz-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
    -webkit-box-shadow:0 0px 15px rgba(0,0,0,0.75) inset;
}

编辑#1

---

单击事件链接以激活悬停效果。

在浮动div中添加另一个div，如下所示：

<div class="boxes event1">
   <div class="child">1</div>
 </div>

并且应在

.child

分区上添加

悬停

事件侦听器。悬停时，它会扩展高度。这样，您就不会看到移动。当然，不要错过

.child

div的颜色和样式，因为您将看到它

---

请让我知道这是否足够清楚。

您能否提供一个示例来说明您的问题。同意@Rorymcrossan，这肯定会加快解决此问题的速度。您可能希望将div存储在绝对位置，并相应地放置它们，因为您已经在使用JavaScript来处理这些事件，您可以进一步使用它来找出如何对齐它们。@Rorymcrossan:jsFIDLE:您必须单击

事件

链接才能激活效果。@Duniyadnd:请查看我编辑的问题和这里的小提琴：我能想到的最好方法是在每个放置的框中添加一个元素绝对地扩展此框而不是实际框将确保框的同级布局不受影响。Ya。我试过了。但是我必须编辑CSS。我仍然可以看到它背后的父母。在那里放一些颜色，这样你就看不见了：）

.boxes .child {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   height: 100px;
}
.boxes {
  //all your styling plus:
  overflow: visible;
}