0

投稿の抜粋を含む石積みのボックスの束を出力するループがあります。

<div class="box">
  <div class="image">
     <img src="" />
  </div>
  <div class="info">
      <h3>//title output with php</h3>
  </div>
</div>

.image {
   position:relative;
   width:200px;
   height:200px;
   z-index:100;
}
.box:hover .image {
   margin-top:-30px;
}
.info {
   position:absolute;
   bottom:0;
   width:100%;
   z-index:99;
}

ここにあるのは、投稿のつまみを含む div と、その下に隠したタイトルを含む div です。タイトルを明らかにするために、.image上余白を負にしますが、私の問題は.info高さが異なることです。したがって.info、ページの読み込み時に jquery を使用してそれぞれの高さを取得し、それを使用してmargin-top対応するそれぞれの負の値を設定する必要があり.imageます。

このようなものですが、明らかにこれは正しくありません。

 function pageLoad() {
   var height = $(".info").height();
   $(".box:hover .image").css("margin-top", height );
 }

では、ループ内の個々のボックスごとにこれを行うにはどうすればよいでしょうか?

4

1 に答える 1

1

これはあなたが探しているものかもしれません。

$(document).ready(function () {
    $('.box').each(function () {
         var height = $(this).children('.info').height();
         $(this).children('.image').css('margin-top', height);
    });
});

前にホバー部分を見たことがありませんでした。おそらく、次のように見えます。

$(document).ready(function () {
    $('.box').hover(function () {
        var height = $(this).children('.info').height();
        $(this).children('.image').css('margin-top', height);
    });
});
于 2012-08-07T14:50:26.333 に答える