【发布时间】：2016-08-20 06:19:25
【问题描述】：
我在 drupal 7 中创建了一个视图——staff1——它有四个 responsive 视图行。每行下面包含一个图像和文本；我有一个叠加层，图像高度相同，文本位置绝对位于图像的中心。我是通过 jQuery 做到的。
简化版：
var imgHeight = $(".img").height();
var rowHeight = $(".wrapper").height() - $(".img").height();
$(".red-back").css("height", imgHeight);
$(".wrapper").css("height", imgHeight).css("margin-bottom", rowHeight);* {
box-sizing: border-box;
}
img {
max-width: 100%
}
.wrapper {
width: 25%;
float: left;
position: relative;
padding: 0 15px;
}
.img {
display: block;
line-height: 0;
position: relative;
}
.red-back {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
background: #e74c3c;
visibility: hidden;
opacity: 0;
}
.wrapper:hover .red-back {
visibility: visible;
opacity: 0.75;
}
.text {
visibility: hidden;
position: absolute;
font-size: 80%;
top: 50%;
left: 50%;
transform: translate(-50%, 100%);
z-index: 5;
opacity: 0;
color: #333;
}
.wrapper:hover .text {
visibility: visible;
opacity: 1;
transform: translate(-50%, -50%);
}
.transition {
transition: all 0.4s;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<div class="text transition">Read Bio</div>
<div class="img">
<img src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
<div class="red-back transition"></div>
</div>
<div class="subtext">afweeawe</div>
<div class="subText2">feweffe</div>
</div>
<div class="wrapper">
<div class="text transition">Read Bio</div>
<div class="img">
<img src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
<div class="red-back transition"></div>
</div>
<div class="subtext">afweeawe</div>
<div class="subText2">feweffe</div>
</div>
<div class="wrapper">
<div class="text transition">Read Bio</div>
<div class="img">
<img src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
<div class="red-back transition"></div>
</div>
<div class="subtext">afweeawe</div>
<div class="subText2">feweffe</div>
</div>
<div class="wrapper">
<div class="text transition">Read Bio</div>
<div class="img">
<img src="http://img.ffffound.com/static-data/assets/6/51cc46900bf5fe574293d49c4d9939e0ebfc8ee3_m.jpg" alt="">
<div class="red-back transition"></div>
</div>
<div class="subtext">afweeawe</div>
<div class="subText2">feweffe</div>
</div>有时有效，有时无效？我有几次高度是 15px，但是用 Angular jQuery 修复了。
完整版：
var imgHeight = $(".view-staff1 .views-field-colorbox img").height();
var rowHeight = $(".view-staff1 .views-row").height() - $(".view-staff1 .views-field-colorbox img").height();
$(".view-staff1 .views-row").css("height", imgHeight).css("margin-bottom", rowHeight);
$(".view-staff1 .views-field-colorbox .red-back").css("height", imgHeight);
逻辑：
两个变量：
- imageHeight = 图片高度
- rowHeight = 父元素高度，（包含图像和文本的包装）减去 imageHeight
使 wrapper 等于 imgHeight，margin-bottom 等于 rowHeight。使叠加层高度等于 imgHeight。
问题是有时 jQuery 没有按顺序运行，我得到 imageHeight 等于 0px。
【问题讨论】：
-
如果你只用 css 来做这件事，那为什么你更喜欢用 Jquery 来做呢？
-
@MinalChauhan 在这种情况下，我可以通过drupal 视图中的重写功能使其工作。但是，如果这不可用，我将不得不使用 jQuery。
标签： jquery css drupal-7 overlay