0

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

此外，我尝试使用 jquery 为悬停的框提供“固定”位置，以尝试将其锁定到位，但砌体重新加载将其更改回“绝对”，但我认为我正在那里做一些事情。

4

1 回答 1

0

我实际上使用 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 说 height * 1.2 相对增加 20%。

然后得到增加的值

heightMoved = height * 0.2;

然后将其他框向下移动。

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

然后在 Jquery 悬停事件中将 .css("top", moveDown) 添加到该 colomun 中的框。粗略的想法

于 2012-07-25T16:52:21.550 回答