将鼠标悬停在进度条上稍微移动一下

时间:2015-07-01 08:40:47

标签: css html5 google-chrome progress-bar

我使用以下内容创建了一个进度条:

<progress value="20" max="100"></progress>

对于悬停文本,我使用了以下css:

progress[value] {
width: 1024px;
height: 20px;
border: none;
}
progress:hover::before {
display: block;
content: attr(value);
width: 100%;
text-align: center;
}

可以在这里看到:jsFiddle

我知道这只适用于谷歌浏览器,但没关系。

我的问题是,当我将鼠标悬停在进度条上时,它会向下移动几个像素。我在css中尝试了不同的边框样式,但没有任何运气。当我将鼠标悬停在进度条上时,它会正确显示该值,但我希望进度条保持原位...

有什么建议吗?

1 个答案:

答案 0 :(得分:1)

将其设为display:block,问题应该消失

progress[value] {

  display: block;
}