javascript - 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 中也有类似的东西。希望这会有所帮助。

编辑 在 Bootstrap CSS 的两个地方是一个 border-bottom 指令，用于您的 carousel-indicators 使其一直延伸向下。我猜直接删除它们会更干净。