0

作为非母语人士解释起来有点复杂，所以这里是当前状态： 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 的情况下做到这一点？

4

1 回答 1

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*/
}

这将工作.. :)

于 2013-07-23T07:34:21.923 回答