Question

我想将div（悬停）从其父容器中的位置扩展到必须填充整个第一行的设置宽度。这是KINDA难以接受的问题所以这是有问题的代码：

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

和here's a fiddle with what i have so far.

正如你所看到的，每行第一个方格中的div #info扩展到我喜欢它们的宽度，最终的结果是我喜欢看起来像我徘徊在每个广场的容器。同一行中的下一个方块扩展到我想要的宽度，但它们只向左扩展 - 我希望它们向左和向右扩展，以便它们填充第一行，就像第一个方格#dover上的#info一样。 / p>

这个问题的答案中的第二个选项：Expand div from the middle instead of just top and left using CSS是一个与我想要实现的类似的概念，但它从中间扩展到等距的左右长度 - 这是不可能的我的布局是因为他们行中父div的位置不同。

如果可能的话，我想用css实现这个目标！如果有人确实有一个JavaScript解决方案，请给我一步一步的说明omg我可怕的javascript。

Answer 1

<edit> last fiddle update </edit>

如果，

框总是大小相同
不是太多
每行总是4个

您可以设置负边距：

向您的方框发送不同的班级（3或4）
或在css文件中使用nth-child（n）

DEMO

(demo updated with transition)

#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。

从中间扩展div，但每边的宽度不等？

1 个答案: