jQuery在框懸停時顯示描述div，上下移動標題

Question

我有一個文本和圖像框，上面一直顯示標題，但是只有當用戶將鼠標懸停在該框上時，描述才需要顯示，這應該將標題上移並在懸停時返回到原始狀態。

我想要的是確保無論描述文本或標題多長時間，框中的文本始終保持垂直和水平居中對齊。 因此，我試圖使用jQuery測量標題的高度並測量描述文本的高度，然后使用這些數字增加/減少可見區域（顯示文本的位置）。

這是我要實現的效果的示例： https ://www.melinbrand.com/（生活方式和技術）部分。

這是我的代碼：

 $(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/下的更多詳細信息