Question

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

第一部分按我的意愿工作，第二部分我希望它从顶部和底部开始增长，将屏幕上方和下方的元素推离屏幕-我可以通过绝对定位来做到这一点，但是然后上方和下方的元素会留在同一位置，并且元素会在它们上方生长（具有正确的z索引）。

我尝试缩放元素，并使用增加/减少的边框，但是我将使用背景图像和可能的视频，因此将无法使用。

这是我目前所掌握的内容：

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

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

tns run ios

Answer 2

朋友，我使用JQuery实现

$(".item").hover(function() {
        $(this).siblings().css( "height", "1px");
        $(this).css( "height", "98%");
    }, function() {
         $(this).siblings().css( "height", "33%");
          $(this).css( "height", "33%");
    });

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;
  overflow: hidden
}

.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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<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>

增加悬停时的高度并将元素推入顶部和底部

2 个答案: