Question

我有一个由wordpress循环创建的框墙，它使用jquery砌体。每个框都包含一个拇指，我隐藏了每个图像的信息，并希望在悬停时使用jquery垂直展开每个框。我的问题是我不想在另一个盒子上覆盖内容，我只能弄清楚如何在悬停时调整整个砌体，当重新装载砌体导致悬停的盒子位于不同的位置时会导致问题。因此，我只需要将其中的盒子放在其悬挂盒子的下方。如果有任何意义，列向下移动而不改变其余砌体结构的格式。您可以在此jsfiddle中看到我目前所拥有的示例。

此外，我试图给悬停的盒子一个＆＃34;固定＆＃34;使用jquery的位置试图将其锁定到位，但是砌体重新加载会将其更改为＆＃34;绝对＆＃34;但我想我会在那里做点什么。

Answer 1

我实际上使用CSS3。

 .box{
transition: all 300 ease;
-moz-transition: all 300 ease; /* Firefox 4 */
-webkit-transition: all 300 ease; /* Safari and Chrome */
-o-transition: all 300 ease ; /* Opera */
}
.box:hover{
transform: scale(1.2,1.2);
-moz-transform: scale(1.2,1.2); /* Firefox 4 */
-webkit-transform: scale(1.2,1.2); /* Safari and Chrome */
-o-transform: scale(1.2,1.2); /* Opera */
}

如果你不想在.box中设置新的高度：hover。这会奏效。我想你可能需要设置一个z-index，使其在悬停时高于其他方框。

如果您的盒子大小不同，您可以使用Jquery .height（）返回高度。然后你可以用它来设置悬停的css，说高度为* 1.2，相对增加20％。

然后获得增加值

heightMoved = height * 0.2;

然后将其他框移开。

boxesBelowTopPosition = $(".box").css("top")
movDown = boxesBelowTopPosition + heightMoved;

然后在Jquery悬停事件中将.css（“top”，moveDown）添加到该colomun中的框。粗略的想法

如何在不调整整个结构的情况下调整框上的砌体柱

1 个答案: