[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

[Ivanowski]

Poprzez Jquery

Kod

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

i kod w tym frameworku

Kod

$(document).ready(function(){

  $( '.bar2' ).hide();

  $( '.bar1' ).mouseover(function(){
  
    $(this).hide();
   $( '.bar2' ).show('slow');

  });

});

Kod pisany z pamięci *no hejterinio*
Oczywiście kod, który podałem umieszczasz na samym dole pliku.

Ten post edytował Ivanowski 29.10.2014, 20:00:02