html - ホバリング時にプログレス バーの値を表示する方法

Question

私の問題に対する適切な解決策を見つけることができませんが、おそらく非常に簡単です。私が欲しいのは、ユーザーがプログレスバーにカーソルを合わせると、プログレスバーが小さなポップアップ画面などでプログレスバーの値を示すことです。あなたはおそらく私が言おうとしていることを理解できるでしょう:)

私のhtml5コード:

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

私はhtml 5とホバーに非常に慣れていません。

Answer 1

attr()疑似要素を使用した単純な CSS で実行できます。

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>