html 图片标题仅在鼠标悬停在两侧时有效

Question

我有一个奇怪的错误，在我的一个页面中，轮播图片中的标题（或标题）属性只出现在侧面。

我注意到它可能与指标或幻灯片或轮播有一些关系（来自bootstrap），因为在没有显示标题的区域，指标是正常的，而在该区域指示器稍微淡出的地方，标题有效。

我附上了一些图片来显示指示器的淡入淡出和鼠标所在的位置（是的，鼠标所在的地方更像是那幅糟糕的蓝色画）。黄色区域是标题工作的地方。

这是代码：

<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）如何让鼠标在整张图片上时出现标题？

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

Answer 1

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

尝试添加类似

的内容

.carousel-indicators{
    height:20px;
}

我确信它可以解决您在 fiddle you provided 中的问题。

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

EDIT Bootstrap CSS 中的 2 个地方是一个 border-bottom 指令，用于 carousel-indicators 使其伸展一直往下。我想把它们去掉会更干净。

html 图片标题仅在鼠标悬停在两侧时有效

html Image Title only working on mouse over the sides

html

javascript

css

indicator

carousel