在頁面加載時調整循環中的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 Pollux Khafra

認爲你可能會尋找。每（）命令 – 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); 
    }); 
});

來源

2012-08-07 14:50:26

兩個問題：

$(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

回答

相關問題