CSS：改變以往div的高度代碼

這是一個有點複雜，作爲非母語來解釋，所以這裏是當前狀態： http://test.moritzfriedrich.com CSS：改變以往div的高度代碼

所以我有填充容器幾乎佔據了整個頁面。它分爲兩半。他們每個人都有三個div充滿了內容。如果你點擊/懸停在他們身上，我希望他們兩個變得更大。對於懸停操作，我使用css3轉換並更改div的高度。但我的問題是他們只是向下發展。下面的代碼：

CSS：

html, body { 
    background: url(/images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    overflow: hidden; 
} 
html, body { 
    margin: 0; 
    padding: 0; 
    height: 100%; 
    text-decoration: none; 
} 
#wrapper { 
    margin: 1% auto; 
    overflow: hidden !important; 
} 
#wrapper { 
    width: 90%; 
    min-height: 90%; 
    height:auto !important; 
    height:90%; 
} 
/* Left Side ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 
#top_left { 
    float: left; 
    width: 50%; 
    background: rgba(0, 0, 0, .2); 
    height: 15%; 
} 
#left { 
    float: left; 
    width: 50%; 
    height: 75%; 
    background: #000; 
    color: #fff; 
} 
#description_left { 
    background: #111; 
    height: 50%; 
} 
#description_left:hover { 
    height: 40%; 
} 
#description_left:hover ~ #slider_left { 
    height: 25%; 
} 
#description_left:hover ~ #contact_left { 
    height: 10%; 
} 
#slider_left { 
    background: #222; 
    height: 40%; 
} 
#slider_left:hover { 
    height: 40%; 
} 
#slider_left:hover ~ #description_left { 
    height: 10%; 
} 
#slider_left:hover ~ #contact_left { 
    height: 25%; 
} 
#contact_left { 
    background: #333; 
    height: 10%; 
} 
#contact_left:hover { 
    height: 40%; 
} 
#contact_left:hover ~ #description_left { 
    height: 25%; 
} 
#contact_left:hover ~ #slider_left { 
    height: 10%; 
} 
/* Right Side ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */ 
...

HTML：

<body> 
    <div id="wrapper"> 
    <div id="top_left"></div> 
    <div id="top_right"></div> 
    <div id="left"> 
     <div id="description_left"></div> 
     <div id="slider_left"></div> 
     <div id="contact_left"></div> 
     <div style="clear: both"></div> 
    </div> 
    <div id="right"> 
     <div id="description_right"></div> 
     <div id="slider_right"></div> 
     <div id="contact_right"></div> 
    </div> 
    </div> 
</body>

相鄰的兄弟連接器時，其他的div改變自己的風格藏漢，但正如我所說，他們僅增長/收縮朝當我希望他們平均增長的時候。

有沒有辦法做到這一點沒有JavaScript？

來源

2013-06-30 Mo Friedrich

你加在頂端的保證金比例，並通過它你成長懸停在div相同的百分比降低毛利。這將確保你的div堅持到底。例如：

#some-div{ 
    height:30%; 
    margin-top: 10%; /*Now my effective height for performing hover: 40% 
    /*some other properties*/ 
    transition: all .2s; 
} 

#some-div:hover{ 
    height:40%; /*height grows*/ 
    margin-top: 0%; /*Margin shrinks allowing the div to grow on top only*/ 
}

這將工作.. :)

來源

2013-07-23 07:34:21 Anubhab

CSS：改變以往div的高度代碼

回答

相關問題