Question

这是一个有点复杂的解释，作为一个非母语的人，所以这是当前的状态： http://test.moritzfriedrich.com

所以我的容器几乎填满整个页面。它分为两半。他们每个人都有三个充满内容的div。如果你点击/悬停它们，我希望它们变得更大。对于悬停时的动作，我使用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的情况下执行此操作？

Answer 1

您可以在此基础上添加保证金百分比，并将保证金减少与您在悬停时增加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*/
}

这会有效.. ：）

CSS：在代码中更改前一个div的高度

1 个答案: