html图片标题仅适用于侧面的鼠标

Question

我有一个奇怪的错误，在我的一个页面中，旋转木马内的图片中的标题（或标题）属性仅出现在两侧。

我注意到它可能与指标或幻灯片或轮播（来自引导程序）有某种关系，因为在标题未显示的区域中，指标是正常的，并且在指标有点小的区域淡出，标题有效。

我附上了一些照片，以显示指示器的淡入淡出和鼠标的位置（是的，那些肮脏的蓝色绘画在鼠标所在的地方更少）。黄色区域是标题的作用。

以下是代码：

<div class = box style = "margin: 0">
        <div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="10000">
            <!-- Indicators -->
            <ol class="carousel-indicators carousel-control" >
                <li data-target="#myCarousel" data-slide-to="0" title="New Location: 12/03/2014" class="active" ></li>
                <li data-target="#myCarousel" data-slide-to="1" title="Bake Sale Success: 21/07/2015"></li>
            </ol>

            <!-- Wrapper for slides -->
            <div class="carousel-inner">

                <div class="item active">
                    <h2 class="featurette-heading subHeadingText">New Location</h2>
                    <img class="img-responsive center-block" src="../images/Reading%20School.jpg"
                         style="width: 70%; height: 70%;" title="Reading School, new location">

                </div>
<!-- Second slide would come here-->

            </div>
        </div>
    </div>

问题很简单（答案可能不是xD）当鼠标放在整个画面上时，如何让标题出现？

编辑：这里的sujested是一个JSfiddle示例 http://jsfiddle.net/r2wLz6xr/16/

Answer 1

出于某种原因，ol.carousel-indicators延伸到整个可用高度，因此覆盖了您的图像（只是左侧的一小部分）。

尝试添加类似

的内容

.carousel-indicators{
    height:20px;
}

我很肯定它会在fiddle you provided修复您的问题。

作为额外的建议，Firefox有一个非常酷的Firebug扩展，您可以在其中检查并查看页面中每个HTML元素的维度。我认为Chrome中也有类似的东西。希望这会有所帮助。

编辑在Bootstrap CSS中的2个位置是border-bottom的{​​{1}}指令，使其一直向下延伸。我想，删除它们会更清晰。