jQuery在框悬停时显示描述div，上下移动标题

Question

我有一个文本和图像框，其中我一直显示标题，但描述只需要在用户将鼠标悬停在框上时才会出现，这应该将标题向上移动并在悬停时返回到原始状态。

我想要的是确保框中的文本始终保持垂直和水平居中对齐，无论描述文本或标题有多长。所以我试图使用 jQuery 来测量标题的高度并测量描述文本的高度，然后使用这些数字来增加/减少可见区域(显示文本的地方(。

以下是我想要实现的效果的示例：https://www.melinbrand.com/(生活方式和T.E.C.H(部分。

这是我的代码：

$(window).load(function(){
  // GET HEIGHT ON LOAD
  $(".featured-image-box").each(function(){
      var original_title_height = $(this).find(".featured-title").height();
      var original_description_height = $(this).find(".featured-description").height();
      $(this).find(".text-area").css({
        height: original_title_height
      });
        $('.featured-image-box').hover(
            function(){
              $(this).find(".text-area").css({
                height: original_title_height + original_description_height
              })
            },
            function(){
              $(this).find(".text-area").css({
                height: original_title_height
              })
            }
        );
    });
});

.featured-images {
  .featured-image-box {
    background-repeat: no-repeat;
    background-size: cover;
    height: 30vw;
    position: relative;
    @include at-query($max, $small) {
      height: 50vw;
    }
    .text-area {
      position: absolute;
      left: 50%;
      top: 50%;
      text-align: center;
      transform: translate(-50%,-50%);
      overflow: hidden;
      @include transition(all 0.3s ease-out);
      h3 {
        color: #fff;
      }
      p {
        color: #fff;
      }
      .featured-description {
        @include transition(all 0.5s ease-out);
        opacity: 0;
        a {
          display: inline-block;
        }
      }
    }
    .box-link {
      position: absolute;
      display: block;
      height: 100%;
      width: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      @include transition(all 0.3s ease-out);
    }
    &:hover .box-link {
      background: rgba(0,0,0,0.5);
    }
    &:hover .featured-description {
      opacity: 1;
    }
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="grid__item {{ column_width }}">
    <div class="featured-image-box" style="background-image: url(http://lorempixel.com/400/600/);">
      <a href="{{ block.settings.featuredsection-url }}" class="box-link"></a>
      <div class="text-area">
        <div class="featured-title">
          <h3> {{ block.settings.featuredsection-title }} </h3>
        </div>
        <div class="featured-description">
          <p>{{ block.settings.featuredsection-description }}</p>
          <span class="btn btn--small">{{ block.settings.featuredsection-linktext }}</span>
        </div>
      </div>
    </div>
  </div>

它有点工作，但是当我悬停在图像上并返回时，高度测量不正确。请帮忙。

Answer 1

如果你可以使用jquery-UI：Toolip小部件提供了一些有用的选项。(如定位等(

https://jqueryui.com/tooltip/下的更多详细信息