平等过渡

Question

我希望在悬停时有一个在顶部和底部扩展div的转换。现在它与上面的div重叠并推开底部的div。

我想要在两侧推开或在两侧重叠。不是两者之一。

#blue, #red {
  width: 100%;
  height: 100px;
  float: left;
  transition: 0.8s;
  transition-timing-function: ease-out;
  font-size: 24px;
  margin-top: 0;
  margin-bottom: 0;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#blue:hover, #red:hover {
  height: 200px;
  font-size: 48px;
  margin-top: -50px;
}

这就是我工作的with：

＆＃13;

＆＃13;

#blue, #red {
  width: 100%;
  height: 50px;
  float: left;
  transition: 0.8s;
  transition-timing-function: ease-out;
  font-size: 12px;
  margin-top: 0;
  margin-bottom: 0;
}

#blue {
  background-color: blue;
}

#red {
  background-color: red;
}

#blue:hover, #red:hover {
  height: 100px;
  margin-top: -25px;
}

＆＃13;

<div id="blue"></div>
<div id="red"></div>
<div id="blue"></div>
<div id="red"></div>
<div id="blue"></div>
<div id="red"></div>
<div id="blue"></div>

＆＃13;

＆＃13;

＆＃13;

谢谢！

Answer 1

以下是您的问题：

1. 我们在这里删除float，这不是必需的。
2. 删除负边距，因为这是重叠代码。
3. 最后，更正不带重复ID的HTML。

这里的代码段：

.blue, .red {
  width: 100%;
  height: 50px;
  transition: 0.8s;
  transition-timing-function: ease-out;
  font-size: 12px;
  margin-top: 0;
  margin-bottom: 0;
}

.blue {
  background-color: blue;
}

.red {
  background-color: red;
}

.blue:hover, .red:hover {
  height: 100px;
  margin-top: 0px;
}

<div class="blue"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="blue"></div>

Answer 2

请检查这个

＆＃13;

＆＃13;

#blue, #red {
    width: 100%;
    height:50px;
    float: left;
    transition: 0.8s;
    transition-timing-function: ease-out;
    font-size: 12px;
    margin-top: 0;
    margin-bottom:0;
}
#blue {
    background-color: blue;
}
#red {
    background-color: red;
}
#blue:hover, #red:hover {
    height:100px;
    padding-top:25px;
}

＆＃13;

    <div id="blue"></div>
    <div id="red"></div>
    <div id="blue"></div>
    <div id="red"></div>
    <div id="blue"></div>
    <div id="red"></div>
    <div id="blue"></div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

不确定你们真的得到了我想做的事情。我不只是试图去除重叠，我试图让div在顶部和底部扩展而不会在顶部然后在底部进行不同的交互。

举一个例子，如果我将鼠标悬停在红色div上，它会推动两个蓝色div触及它或两者重叠。我也没关系。现在它在一端重叠并在另一端推开。

所以要清楚，我不想简单地让div更大而不重叠。

到目前为止，感谢您的答案！