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

Question

尽管我找不到适合我的问题的解决方案，但它可能会非常简单。我想要的是以下内容，当用户将鼠标悬停在进度条上时，进度条会在一个小弹出屏幕或类似的东西中给出进度条的值。你大概能明白我想说什么:)

我的html5代码：

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

我对 html 5 和悬停的东西非常陌生。

Answer 1

您可以使用简单的 CSSattr()和伪元素来做到这一点。

HTML：

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

CSS：

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

​</p>

这是工作示例：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>