Css 从中间展开div，但两边的宽度不相等？

我想将div（悬停时）从其父级在容器中的位置扩展到必须填充整个第一行的设置宽度。这有点难以用语言表达，所以这是有问题的代码：

#info {
    z-index:2;
    position:absolute;
    background:#000;
    color:#fff;
    top:0px;
    width:100%;
    height:100%;
    opacity:0;
    transition-duration:0.5s;  
    -moz-transition-duration:0.5s;  
    -webkit-transition-duration:0.5s;  
    -o-transition-duration:0.5s; }

#icon:hover #info {
    opacity:1;
    width:665px;
    transition:opacity 0.5s, width 0.5s ease 0.5s;  
    -moz-transition:opacity 0.5s, width 0.5s ease 0.5s; 
    -webkit-transition:opacity 0.5s, width 0.5s ease 0.5s; 
    -o-transition:opacity 0.5s, width 0.5s ease 0.5s;  } 

及

如您所见，每行第一个方块中的div#info扩展到我希望它们的宽度，最终结果是我希望我悬停的每一个方块在容器中的条形图。同一行中的下一个方块将扩展到我所需的宽度，但它们仅向左扩展-我希望它们向左和向右扩展，以便像第一个方块的div#info on hover那样填充第一行

这个问题答案中的第二个选项：是一个与我试图实现的概念类似的概念，但它从中间扩展到等距的左右长度-这不适用于我的布局，因为父div在其行中的位置不同

如果可能的话，我想用css来实现这一点！如果有人真的有javascript解决方案，请给我一步一步的说明，天哪，我对javascript很讨厌。

如果,

盒子的大小总是一样的
不太多
每行始终有4个
您可以通过以下任一方式设置负边距：

将不同的类别（3或4）分派到您的箱子中
或者在css文件中使用第n个子项（n）
使用第n个子（n）方法

还有盒子吗，更新选择器，或者是时候使用了。
对于非js，您可以使用第n个子项并为每个方块指定宽度吗？谢谢！！不过我还有另一个问题——为了使网格看起来更对称，我让图标3和4向左扩展其div#info，而不是向右扩展，这是默认设置。但是我很难让第三个图标的#信息在悬停时移到行的右端（就像第二个图标的效果一样，但是对于第三个图标，我希望它移到右边。@ampora对于相反的效果，使用相反的方向：右边距：-177px；）哇，这是非常明显的；uuu;；再次感谢你，天哪，我还有一个问题，我希望这是最后一个问题（对不起，我问了这么多天哪），但我在小提琴上看到了一个无关的问题——当我将鼠标悬停在一行中的第一个图标上，然后我将鼠标悬停在第二、第三和第四个图标上方的div#info中，它们各自的div#info就会显示出来。我如何才能使其在任何div#info图标上悬停，其#info将保持在那里，而在行中的另一个图标上悬停不会显示其div#info？我试图在“信息”中添加一个高数字的z索引，但没有任何效果。@ampora您好，也许指针事件可以帮助：，鼠标会看穿的。哦，天哪，结果我只是在错误的位置添加了z索引-它必须进入#图标：第n个孩子（4n+n）：悬停#信息{取而代之。但感谢您在所有方面的帮助！！我以前从未听说过指针事件；也许它在我未来的项目中会很有用。：）
#icon:nth-child(2):hover #info, #icon:nth-child(6):hover #info {
    margin-left:-170px;
}
#icon:nth-child(3):hover #info, #icon:nth-child(7):hover #info {
    margin-left:-350px;
}
#icon:nth-child(4n):hover #info {
    margin-left:-530px;
}