html - 悬停时增加高度并插入元素顶部和底部

Question

我在页面上有 3 个相等的元素(每个元素的高度为 33.333%)，当用户将鼠标悬停在其中一个元素上时，我希望该元素的高度增长到 100%。

第一部分按照我的意愿工作，第二部分我希望它从顶部和底部增长，将上方和下方的元素推离屏幕 - 我可以通过绝对定位来做到这一点，但是然后上方和下方的元素保持在同一个位置，并且元素在它们上方生长(使用正确的 z-index)。

我已经尝试缩放元素，并使用增加/减少的边框，但是我将使用背景图像和可能的视频，所以这不会起作用。

这是我目前拥有的一个 jsfiddle:

body {
    height: 100%;
    overflow: hidden;
}

.home-split {
    height: 100vh;
}

.home-split .item {
    height: 33.333%;
    width: 100%;
    transition: all 1s;
    z-index: 999;
  text-align: center;
}

.h-100 {
  height: 100%;
}

.home-split .item:hover {
    height: 100%;
    transition: all 1s;
    z-index: 9990;
    top: 0 !important;
}

.home-split .item .title {
    align-self: center;
}

.home-split .item a {
    text-decoration: none;
    color: #FFF;
    display: table;
  height: 100%;
  width: 100%;
}

.home-split .item a h2 {
    display: table-cell;
    vertical-align: middle;
}

.home-split .item:nth-child(1) {
    background-color: #000;

}

.home-split .item:nth-child(2) {
    background-color: #d7d7d7;
}

.home-split .item:nth-child(3) {
    background-color: #ebebeb;
}

<section class="home-split">

  <div class="row no-gutters item">

    <div class="col-12 text-center h-100">
      <a href="#">
        <h2>Item 1</h2>
      </a>
    </div>

  </div>

  <div class="row no-gutters item">

    <div class="col-12 text-center h-100">
      <a href="#">
        <h2>Item 2</h2>
      </a>
    </div>

  </div>

  <div class="row no-gutters item">

    <div class="col-12 h-100">
      <a href="#">
        <h2>Item 3</h2>
      </a>
    </div>

  </div>


</section>

https://jsfiddle.net/d81mxuL5/

Answer 1

当外层容器悬停时，您需要一个不太具体的选择器来隐藏所有部分:

.home-split:hover .item {
  height: 0;
  overflow: hidden;
}