css - 元素层阻止鼠标悬停以显示标题

Question

对不起标题，暂时想不出更好的描述。

情况:将鼠标悬停在进度条上以显示标题。灰色与绿色混合的小区域(在我的真实情况下更大)没有显示标题。看起来数字是进度条前面的一层。

http://jsfiddle.net/w6fpszkx/

<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”数字减少到数字本身的顶部和底部限制？谢谢。

Answer 1

是的。您必须更好地调整元素的 line-height。

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

(我删除了您在 html 中作为在线样式添加的值“1”)

JSFIDDLE

已编辑:但要确保您的工具提示始终显示，只需添加:

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

所以你的酒吧将永远超过这个数字:

updated FIDDLE