0

これは、非ネイティブ スピーカーとして説明するのが少し複雑なので、現在の状態は次のとおりです: 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なしでこれを行う方法はありますか?

4

1 に答える 1