html Image Titel funktioniert nur mit Maus über den Seiten

Question

Ich habe einen seltsamen Fehler, wo auf einer meiner Seiten das Titel (oder Untertitel) Attribut in einem Bild in einem Karussell nur auf den Seiten erscheint.

Ich habe festgestellt, dass es eine Beziehung mit den Indikatoren oder Folie oder Karussell (vom Bootstrap) haben kann, weil in dem Bereich, dass der Titel nicht angezeigt wird, sind die Indikatoren normal, und in dem Bereich, wo die Indikatoren sind wenig ausgeblendet, der Titel funktioniert.

Ich befestigte einige Bilder, um die Einblendung der Indikatoren anzuzeigen und wo die Maus war (yep, dass beschissene blaue Malerei ist weniger, wo die Maus war). Im gelben Bereich arbeitet der Titel.

Hier ist der Code für das:

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

Die Frage ist einfach (die Antwort vielleicht nicht xD) Wie kann ich den Titel erscheinen, wenn die Maus ist über das ganze Bild?

EDIT: als JSfiddle Beispiel ist hier sujested http://jsfiddle.net/r2wLz6xr/16/

Answer 1

Aus irgendeinem Grund Ihre ol.carousel-indicators daher auf die gesamte zur Verfügung stehende Höhe erstreckt Ihre Bilder Belags (nur nicht ein kleiner Teil nach links).

Probieren Sie etwas wie

.carousel-indicators{ 
    height:20px; 
} 

Zugabe ich positiv bin es behebt das Problem in der fiddle you provided.

Als zusätzlichen Ratschlag, Firefox bekam eine wirklich coole Firebug-Erweiterung, wo Sie die Dimensionen für jedes HTML-Element auf Ihrer Seite überprüfen und sehen können. Ich denke, dass es auch in Chrome etwas Ähnliches gibt. Hoffe das hilft.

EDIT In 2 Plätze in der Bootstrap CSS ist eine border-bottom Richtlinie für Ihre carousel-indicators, dass es den ganzen Weg hinunter strecken machen. Es ist sauberer, sie einfach zu entfernen, denke ich.