[CSS][HTML]Progress bar, getbootstrap hover. Opcje

[Giluś]

Hej, chciałbym zrobić coś takiego:
Normalnie nic się nie dzieję, dopiero gdy najedziemy (myszką, hover) na pasek to on zanika i pojawia się inny który jest w 100% wypełniony z napisem: Brakuję: xxx %.

[HTML] pobierz, plaintext 
<div class="progress progress-striped active">
<?php
    $bar_procent = ($users['jednostka_exp'] / $ile_expa['exp']) * 100;
    $bar_procent_2 = 100 - $bar_procent;
?>
        <div class="bar bar1" style="width: <?php echo $bar_procent; ?>%;"></div>                         
</div>
[HTML] pobierz, plaintext 

Myślałem, żeby zrobić tak:

Dodać kod:

[HTML] pobierz, plaintext 
<div class="bar bar2" style="width: 100%;">Pozostało <?php echo $bar_procent_2; ?>%</div> 
[HTML] pobierz, plaintext 

Standardowo:
Klasa: bar1 - jest widoczna, a klasa bar2 - jest niewidoczna.

Następnie, gdy najedziemy na ten pasek to staje się on niewidoczny i dodatkowo staje się wtedy aktywny 2 pasek (bar2).

Macie jakieś pomysły ?


Pozdrawiam i z góry bardzo dziękuje