从中间扩展div，但两侧宽度不相等？

debugcn 发表于 Dev

双耳瓶

我想将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一样填充第一行。

这个问题答案的第二个选择：使用CSS从中间扩展div而不是仅从顶部和左侧进行扩展与我要实现的概念类似，但是它从中间扩展为等距的左右长度-不会由于父div在其行中的位置不同，因此无法使用我的布局。

如果可能的话，我想仅用CSS来实现！如果有人确实有javascript解决方案，请给我逐步说明，我对javascript很不满意。

G-西里尔

<edit>最后的小提琴更新 </edit>

如果，

盒子总是一样大小
不是很多
每行总是4

您可以通过以下两种方式设置负边距：

派一个不同的班级（3或4）到您的盒子里
或在css文件中使用nth-child（n）

使用nth-child（n）方法的DEMO（通过过渡更新了演示）

#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;
}

更多箱子？，更新选择器，或者可能是时候使用class了。

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。