将鼠标悬停在底部时，更改div的高度

Question

我正在尝试制作我的div，在悬停时停留在他们当前的位置，但在底部，你正在盘旋的那个需要获得一定的高度，如何在不使用flexbox的情况下实现这一目标？ /> 目前正在发生这种情况：https://i.gyazo.com/746b8f3eb1ade6d870439ad4826adf9e.mp4

.p-block {
width: 100%;
margin-left: 10%;
margin-right: 10%;
}

.project-block {
margin-left: 20px;
display: inline-block;
width: 20%;
background-color: #000;
height: 300px;
}

.project-block:hover {
height: 380px;
}

，html如下

            <div class="p-block">
                <div class="project-block">
                </div>
                <div class="project-block">
                </div>
                <div class="project-block">
                </div>
                <div class="project-block">
                </div>
            </div>

Answer 1

看看是否有帮助：

.p-block {
  width: 100%;
  margin-left: 10%;
  margin-right: 10%;
}

.project-block {
  margin-left: 20px;
  display: inline-block;
  margin-top: 80px;
  width: 20%;
  background-color: #000;
  height: 300px;
}

.project-block:hover {
  height: 380px;
  margin-top: 0;
}

<div class="p-block">
  <div class="project-block">
  </div>
  <div class="project-block">
  </div>
  <div class="project-block">
  </div>
  <div class="project-block">
  </div>
</div>

Answer 2

试试这个：

＆＃13;

＆＃13;

* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}

body,
html {
  width: 100%;
  height: 100$;
}

.p-block {
  width: 100%;
  margin-left: 10%;
  margin-right: 10%;
  margin-top: 40px;
}

.project-block {
  margin-left: 20px;
  display: inline-block;
  width: 20%;
  background-color: #000;
  height: 300px;
}

.project-block:hover {
  margin-top: -40px;
  padding-top: 40px;
  background: black;
  height: 340px;
}

＆＃13;

<div class="p-block">
  <div class="project-block">
  </div>
  <div class="project-block">
  </div>
  <div class="project-block">
  </div>
  <div class="project-block">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;