Question

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

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

以下是我想要实现的效果示例： https://www.melinbrand.com/（LIFESTYLE＆amp; T.E.C.H）部分。

这是我的代码：

＆＃13;

$(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
              })
            }
        );

    });

});

＆＃13;

.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;
    }
  }
}

＆＃13;

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

＆＃13;

这种方法很有效，但是当我将图像悬停并返回时，高度测量值并不正确。请帮忙。

Answer 1

如果您可以使用jquery-UI：Toolip小部件提供了一些有用的选项。（如positioning等）

https://jqueryui.com/tooltip/

下的更多详情

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

1 个答案: