悬停时增加高度并推动元素顶部和底部

Posted 2021-03-27

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

第一部分按照我喜欢的方式工作，第二部分我希望它从顶部和底部生长，将元素从上方和下方推出屏幕 - 我可以用绝对定位来做，但随后元素上面和下面停留在同一个地方，元素越过它们（使用正确的z-index）。

我已经尝试缩放元素，并使用增加/减少的边框，但是我将使用背景图像和潜在的视频，所以这将无法正常工作。

这是我目前所拥有的一个方面：

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/

答案

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

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

另一答案

朋友我用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>

以上是关于悬停时增加高度并推动元素顶部和底部的主要内容，如果未能解决你的问题，请参考以下文章

我的博客下拉子菜单在悬停时消失

边框底部问题（悬停时向下扩展）

键盘消失时增加Tableview的高度？

滚动时如何保持 <li> 元素固定在 <ul> 元素的顶部和底部

在圆形元素上使用顶部和底部边框时的 iOS CSS 问题

滚动时更改元素的高度