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

Question

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

我的 html5 代码:

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

我对 html 5 和 hover 非常陌生。

Answer 1

您可以使用简单的 CSS 使用 attr() 和伪元素来实现。

HTML:

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

CSS:

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

这是工作示例:jsFiddle

您可以设置此伪元素的样式，使其看起来像“弹出屏幕”或您想要的任何内容；-)