html图像标题仅在鼠标悬停在两侧时起作用

基卡达斯

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

我注意到它可能与指示器或幻灯片或旋转木马（来自引导程序）有关，因为在未显示标题的区域中，指示器是正常的，而在指示器略微褪色的区域中，标题有效。

我附上了一些图片，以显示指示器的淡入淡出以及鼠标所在的位置（是的，肮脏的蓝色绘画在鼠标所在的位置上少得多）。标题是黄色区域。

这是该代码：

<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>

The question is simple (the answer maybe not xD) How do I make the title to appear when the mouse is over the whole picture?

EDIT: as sujested here is a JSfiddle example http://jsfiddle.net/r2wLz6xr/16/

PinkTurtle

For some reason your ol.carousel-indicators extends to the whole available height hence covering your images (just not a small part to the left).

Try adding something like

.carousel-indicators{
    height:20px;
}

I am positive it fixes your issue in the fiddle you provided.

As an extra piece of advice, Firefox got a real cool Firebug extension where you can inspect and see the dimensions for every HTML element in your page. I think there is something similar in Chrome too. Hope this helps.

编辑Bootstrap CSS中的2个地方是一个border-bottom指令carousel-indicators，使它一直向下延伸。我猜想删除它们会更干净。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。