これは、非ネイティブ スピーカーとして説明するのが少し複雑なので、現在の状態は次のとおりです: http://test.moritzfriedrich.com
したがって、ほぼページ全体を埋めるコンテナがあります。2つに分かれています。それぞれに、コンテンツで満たされた 3 つの div があります。クリック/ホバーすると、2つが大きくなります。ホバー時のアクションには、css3-transitions を使用し、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なしでこれを行う方法はありますか?