javascript - 向包含 slider 的 div 添加 div 标题(跟进上一个问题)

Question

我目前有一个由带有方形 div 的图像 slider 和文本 slider 组成的网格布局。 I have just asked a question如何为网格内的这些方 block 添加标题。现在，当 div 包含一个文本 slider 时，我可以很好地做到这一点。但是，当我尝试将相同的标题应用于包含图像 slider 的 div 时，它不起作用，有人可以告诉我如何做到这一点。

DIVS 的 CSS

.slider2 { position: relative; }

.caption-box {
position: absolute;
right: 0;
height: 20px;
width:100px;
background-color: red; // change to suit
color: #fff; // change to suit
}
.trigger {
width: 200px;
height: 200px;
}

.static {
position: relative;
width: 200px;
height: 200px;
text-align: center;
font-size: 0;
border-style: solid;
border-width: 1px;
border-color: #CCCCB2;
border-radius: 5px; 
}

下面是文本 slider DIV 的 HTML 代码，其中 CAPTION DIV 运行良好

    <div class="trigger">
        <div class="slider2">
<div style="border-style: solid; border-width: 1px; border-color: #CCCCB2; border-radius: 5px; height: 200px; width: 200px; color: #CCC;" class="just_text"><div class="caption-box">Monthly Plan</div>As part of our budget graphic design service we also offer a money saving monthly advertising schedule option. Whether it be for 6, 9 or 12 months we will remove all stress of advertising from your office leaving you to concentrate on your customers.    </div>
<div style="border-style: solid; border-width: 1px; border-color: #CCCCB2; border-radius: 5px; height: 200px; width: 200px; color: #CCC;" class="just_text"><div class="caption-box">Web Updates</div>Our website design service also includes a money saving update scheme. For a monthly fee you can have updates to keep your website fresh and dynamic. No other company can offer this service.</div>
 </div>
    </div>

下面是图像 slider 的 HTML 代码，我无法在其中使用 CAPTION DIV

  <div class="trigger">
        <div tabindex="0" class="maincontent static"><div class="slider2">
<img src="client9.jpg" height="200" width="200" />
<img src="client10.jpg" height="200" width="200" />
<img src="client11.jpg" height="200" width="200" />
<img src="client2.jpg" height="200" width="200" />
</div></div>
    </div>

JavaScript

<script>
$(function(){
$('.slider').sss({
slideShow : true, // Set to false to prevent SSS from automatically animating.
startOn : 0, // Slide to display first. Uses array notation (0 = first slide).
transition : 400, // Length (in milliseconds) of the fade transition.
speed : 20000, // Slideshow speed in milliseconds.
showNav : true // Set to false to hide navigation arrows.
});
$('.slider2').sss({
 slideShow : true, // Set to false to prevent SSS from automatically animating.
 startOn : 0, // Slide to display first. Uses array notation (0 = first slide).
 transition : 400, // Length (in milliseconds) of the fade transition.
 speed : 10000, // Slideshow speed in milliseconds.
 arrows : false // Set to false to hide navigation arrows.
 });
 });
 </script>

JavaScript 链接到称为 SSS.CSS 的 CSS

.sss {
height: 0;
margin: 0; 
padding: 0;
position: relative;
display: block;
overflow: hidden;
}

.ssslide {
width: 100%;
margin: 0;
padding: 0;
position: absolute;
top: 0;
left: 0;
display: none;
overflow: hidden;
}

.ssslide img {
max-width: 100%;
height: auto;
margin: 0;
padding: 0;
position: relative;
display: block;
}

.sssnext, .sssprev {
width: 25px;
height: 100%;
margin: 0;
position: absolute;
top: 0;
background: url('images/arr.png') no-repeat;
}

.sssprev {
left: 3%;
background-position: 0 50%;
}

.sssnext {
right: 3%;
background-position: -26px 50%;
}

.sssprev:hover, .sssnext:hover {
cursor: pointer;
}.row .col .trigger .slider2 .just_text {
color: #CCC;
}

Answer 1

图像的代码不完整，必须创建我自己的版本才能重现问题。但是一旦完成，问题就很容易找到了。你可以看到它在这个 JSFiddle 上工作:http://jsfiddle.net/Lbrcbhxw/2/ (我冒昧地对其进行了一些清理，以便于阅读)。

问题是 .static 有一个使文本不可见的 font-size:0。删除它(或者不要用它包裹带有图像的div)，问题就会解决。

.static {
    position: relative;
    width: 200px;
    height: 200px;
    text-align: center;
    /* font-size: 0; */
    border-style: solid;
    border-width: 1px;
    border-color: #CCCCB2;
    border-radius: 5px; 
}

文本版本没有环绕 .static，所以它可以正确显示并且没有问题。