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的高度，然后使用它来设置每个对应margin-top的负.image。

这样的事情，但显然这是不对的。

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

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

1 个答案: