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

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

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