在页面加载时循环调整 div 的 css

Question

我有一个循环，输出一堆带有砖石的盒子，其中包含帖子摘录。

<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高度不同。所以我需要在页面加载时使用 jquery 抓取每个.info的高度，然后使用它来设置每个相应.image的负margin-top。

像这样的东西，但显然这是不对的。

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

那么，如何为循环中的每个单独框执行此操作呢？

Answer 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);
    });
});