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>

Соседний разъем родственный делает другие дивы изменить свой стиль Aswell, но, как я сказал, что они только растут/сжиматься в направлении дно, когда я хочу, чтобы они росли одинаково.

Есть ли способ сделать это без 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 в коде

ответ

Смежные вопросы