jquery - 子 div 继承高度设置为 0 的 siblingdiv 的高度

Question

我有一个 div，它有两个子 div。

一个是隐藏的并包含一些文本， 另一个是带有背景图片的div。 当我将鼠标悬停在父 div 上时，它会显示隐藏的文本 div。

我希望隐藏文本 div 的高度与背景图像 div 的高度相同

如果我将隐藏文本的 div 大小设置为 100%，则 div 的高度太大

这是一个例子 http://jsfiddle.net/vg050o67/3/

代码

.portfolioImage {
   width: 100%;
   height: auto;
   position: relative;
}
   .hiddenText {
   position: absolute;
   padding-top:10%;
   width:100%;
   height:100%;
   text-align:left;
   padding-left:10%;
   z-index:22;
   background-color:#000;
}
 .hiddenText h2 {
   color:#fff;
   text-transform: uppercase;
   font-weight:700;
}
   .hiddenText p {
   color:#fff;
}
   .image_frame {
   -webkit-transition: all 0.3s ease;
   -moz-transition: all 0.3s ease;
   -o-transition: all 0.3s ease;
   ms-transition: all 0.3s ease;
   transition: all 0.3s ease;
   z-index:21;
   opacity: 1.0;
   position:relative;
   background-size: 100%;
   width: 100%;
   padding-top:100%;
   height: 0;
}
.lowerOpacity {
   opacity:0.9;
}

div class="container">
    <div class="row no-gutter">
        <div class="col-xs-6 col-sm-4 col-md-3">
            <div class="portfolioImage">
                <div class="footerBar">
                        <h2>Title 1</h2>

                    <p>extra text snippet...</p>
                </div>
                <div class="image_frame" style="background-image: url('https://placekitten.com/g/200/300'); background-repeat:no-repeat;"></div>
            </div>
        </div>
        <!-- /col-->
    </div>
    <!-- /row-->
</div>
<!-- /container-->

$('.hiddenText').hide();

var formType = '';
$('.portfolioImage').hover(

function () {
    $(this).find(".hiddenText").addClass("lowerOpacity");
    $(this).find('.hiddenText').show();

}, function () {
$(this).find(".hiddenText").removeClass("lowerOpacity");
$(this).find('.footerBar').hide();
});

如果我设置高度为auto，然后用jQuery获取图片div的高度，返回的高度为0

例子 http://jsfiddle.net/vg050o67/2/

 var bgImageHeight = $(this).find('.image_frame').height();
alert("height=" + bgImageHeight);
$(this).find('.footerBar').css('height', bgImageHeight + 'px');

由于图像是响应式的，我不能硬编码隐藏 div 的高度

有没有人对我如何解决这个问题有任何想法，或者我是否使事情复杂化了？

Answer 1

也许是我的Codepen可能会给你一个指针，让你只使用 html 和 css 做这样的事情。

它使用常规的 <img>使用类 img-responsive 做出响应的标签.当鼠标悬停在 <img> 上时visibility: hidden设置使图像不可见但仍占用文档中的空间。悬停也设置 display: block在绝对定位的悬停内容上，所有定位属性都设置为零，以便它与图像一样大。

.box {
  position: relative;
}
.box-text {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: none;  
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

.box:hover .box-image {
  visibility: hidden;
}

.box:hover .box-text {
  display: block;
}

<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="row">
    <div class="col-xs-3">
      <div class="box">
        <div class="box-text">
          <h1>Header</h1>
          Content
        </div>
        <div class="box-image">
          <img src="http://placekitten.com/300/250" class="img-responsive" />
        </div>
      </div>
    </div>
  </div>
</div>