元素層阻止鼠標懸停顯示標題

情況：將鼠標懸停在進度條上以顯示標題。與綠色混合的灰色區域（在我的真實情況下，它更大）沒有顯示標題。看起來數字是進度條之前的圖層。

<div class="col-md-4"> 
    <div class="panel panel-default"> 
     <div class="panel-heading text-center">Title</div> 
     <div class="panel-body" style="padding: 0px 15px 15px 15px;"> 
      <p class="text-center" style="font-size: 110px; line-height: 1;">82<span style="font-size: 23px;">%</span></p> 
      <div class="progress"> 
       <div title="" data-html="true" class="progress-bar progress-bar-success" style="width: 82%" data-original-title="ON TIME<br><span class='label label-success' style='display: inline-block; width: 100%; margin-bottom: 5px;'>9 (82%)</span>"> 
        <span>9 (82%)</span> 
       </div> 
       <div title="" data-html="true" class="progress-bar progress-bar-danger" style="width: 18%" data-original-title="EXPIRED<br><span class='label label-danger' style='display: inline-block; width: 100%; margin-bottom: 5px;'>2 (18%)</span>"> 
        <span>2 (18%)</span> 
       </div> 
      </div> 
     </div> 
    </div> 
</div>

是否有可能降低頂部和底部灰色區域從「82」號的numbert本身的頂部和底部限制？謝謝。

來源

2015-11-05 Khrys

不知道你需要在這裏。你可以發佈一個示例演示或更好的說明嗎？ –

是的。你必須更好地調整元素的line-height。

.text-center { 
    line-height: 0.75; 
    }

（我刪除的值「1」你在HTML添加風格在線）

JSFIDDLE

編輯：但可以肯定你的提示將始終只顯示加：

.progress { 
    position:relative; 
    z-index:1; 
}

所以你的酒吧將永遠是OVER號碼：

updated FIDDLE

來源

2015-11-05 11:59:21

謝謝你的時間。但它仍然無法正常工作。如果您將鼠標懸停在數字下方的綠色欄上，工具提示將不會顯示。因爲「隱形」區域以下和數字上方仍然存在。 – Khrys

我已經更新了我的答案。一探究竟 –

元素層阻止鼠標懸停顯示標題

回答

相關問題