如何在悬停时使进度条的值可见

Question

虽然我无法找到适合我问题的解决方案，但这可能会非常简单。 我想要的是以下内容，当用户将鼠标悬停在进度条上时，进度条会在一个小弹出屏幕或类似内容中显示进度条的值。你可以弄清楚我想说的是什么：）

我的html5代码：

<progress id="progressBar" value="50" max="100"></progress>

我非常喜欢html 5和悬停的东西。

Answer 1

你可以使用简单的CSS使用attr()和伪元素。

HTML：

<progress id="progressBar" value="50" max="100"></progress>

CSS：

progress#progressBar:hover:after {
    display: block;
    content: attr(value);
}

以下是工作示例：jsFiddle

你可以设置这个伪元素的样式，所以它看起来像“弹出屏幕”或任何你想要的; - ）

Answer 2

使用:before

progress#progressBar:hover:before {
    display: inline;
    content: attr(value);
}

小提琴：http://jsfiddle.net/U58Tp/

Answer 3

这有点不雅，但确实有效。 将onmouseover和onmouseout脚本附加到进度条以显示和隐藏div。它可以根据需要进行放置和设计。

<progress id="progressBar" value="0" max="100" 
 onmouseover="a=document.getElementById('stat');
              a.innerHTML=this.value; 
              a.style.display='block'" 
 onmouseout="document.getElementById('stat').style.display='none'">
</progress>
<div id="stat"></div>