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

问题描述：

我有一个循环，输出一堆包含帖子选段的砌体的框。在页面加载时调整循环中的div的css

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

那么我怎样才能做到这一点在循环中的每个单独的框？

认为你可能会寻找。每（）命令 – 2012-08-07 14:51:15

答

这可能是你要找的。 jQuery中

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

两个问题：

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

我没有看到过悬停一部分，也许你想找更多的东西这样。我是否需要添加pageLoad或Document准备好？我是否需要在循环下面添加脚本？只是添加这个没有任何效果。 – 2012-08-07 14:57:52

你应该把它放在文档里面。我编辑了这篇文章。 .each循环遍历每个框会发现子信息获取高度并将其分配给子图像。 – 2012-08-07 15:00:50

我要指出的一件事是根据我的经验，消除边际负值通常会导致麻烦。然而，我并没有完全理解你正在努力完成什么。 – 2012-08-07 15:02:35

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

相关推荐