0

jquery石積みを使用するワードプレスループによって作成されたボックスの壁があります。各ボックスには親指が含まれており、各画像に関する情報を非表示にして、ホバー時に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 を高さ * 1.2 に設定し、相対的に 20% 増加させることができます。

次に、増加の値を取得します

heightMoved = height * 0.2;

次に、他のボックスを下に移動します。

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

次に、Jquery ホバー イベントで、その列のボックスに .css("top", moveDown) を追加します。大まかなアイデア

于 2012-07-25T16:52:21.550 に答える