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

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

Answer 1

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

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

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

<强> JSFIDDLE

已修改但请确保您的工具提示始终只显示添加：

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

所以你的酒吧总是超过数字：

<强> updated FIDDLE