html - 将鼠标悬停在底部时更改 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

试试这个:

* {
  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;
}

<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>