Question

我有一个有两个子div的div。

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

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

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

和代码

.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，该内容绝对定位所有定位属性设置为零，以便它与图像一样大。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

将box-sizing:border-box;添加到.hiddenText课程。这将使容器的盒子模型尊重填充作为100％维度的一部分。

.hiddenText {
    position: absolute;
    box-sizing:border-box;
    padding-top:10%;
    width:100%;
    height:100%;
    text-align:left;
    padding-left:10%;
    z-index:22;
    background-color:#000;
}

更新小提琴：

http://jsfiddle.net/vg050o67/10/

Answer 3

你可以在没有javascript的情况下完成所有这些工作。

以下是演示：http://jsfiddle.net/vg050o67/9/

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

3 个答案: