html画像タイトルのみマウスの両側で働いています

Question

カルーセル内の画像内のタイトル（またはキャプション）属性が私のページの1つに表示されています。

私は、タイトルが表示されていない領域ではインジケータが正常であるため、インジケータやスライドやカルーセル（ブートストラップから）と何らかの関係があることに気付きました。少し消えて、タイトルが動作します。

Iは指標のフェードを示すためにいくつかの写真を添付し​​、ここで、マウスは、（YEPそのくだらない青い絵は、マウスがどこより少ない）でした。黄色の領域は、タイトルが動作する場所です。ここで

そのためのコードです：

<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としてあなたol.carousel-indicatorsが故にあなたのイメージ（左だけではない小さな部分）をカバーする全利用できる高さまで伸び何らかの理由でJSfiddle例 http://jsfiddle.net/r2wLz6xr/16/

Answer 1

です。

.carousel-indicators{ 
    height:20px; 
} 

のようなものを追加すること

てみてください、私はそれがfiddle you providedであなたの問題を修正ポジティブです。アドバイスの余分な部分として

、Firefoxはあなたがあなたのページ内のすべてのHTML要素の寸法を検査して見ることができます本物のクールなFirebugの拡張子を得ました。 Chromeにも同様のものがあると思います。お役に立てれば。ブートストラップCSSでの2ヶ所で

EDITは、それはすべての方法を下に伸ばし作るあなたのcarousel-indicatorsためborder-bottomディレクティブです。それはちょうど私が推測するそれらを削除するクリーナーです。