Estava tentando com o Jquery (hide show) porém ele quebrava linha do elemento inline
e estava ficando muito estranho, com isso eu resolvi utilizar o bom e velho JavaScript Puro e para setar o valor dentro de cada <p>
utilizei o Jquery. Aviso de antemão que não é a melhor solução(Irei refatorar essa resposta mais tarde utilizando 100% de Jquery com um código + limpo).
O preview da resposta está sem PHP(pois não conheço nenhum fiddle de PHP), mas eu vou postar um código de como ficaria com o seu PHP no final.
function mouseIn(star,percentual){
$(".p-"+star).html(percentual+"%");
}
function mouseOut(star){
$(".p-"+star).html('');
}
.inline {
margin-left: 10px;
height: 80px;
display: inline-block;
}
.percentage {
margin-left: 12px;
display: inline;
}
.star {
background-image: url("https://cdn1.iconfinder.com/data/icons/web-interface-part-2/32/star-512.png");
width: 50px;
height: 50px;
background-size: contain;
float:initial;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="inline">
<div class="text">
<p class="percentage p-1"></p>
</div>
<div onmouseover="mouseIn(1,5)" onmouseout="mouseOut(1)" class="star"></div>
</div>
<div class="inline">
<div class="text">
<p class="percentage p-2"></p>
</div>
<div onmouseover="mouseIn(2,15)" onmouseout="mouseOut(2)" class="star"></div>
</div>
<div class="inline">
<div class="text">
<p class="percentage p-3"></p>
</div>
<div onmouseover="mouseIn(3,10)" onmouseout="mouseOut(3)" class="star"></div>
</div>
<div class="inline">
<div class="text">
<p class="percentage p-4"></p>
</div>
<div onmouseover="mouseIn(4,60)" onmouseout="mouseOut(4)" class="star"></div>
</div>
<div class="inline">
<div class="text">
<p class="percentage p-5"></p>
</div>
<div onmouseover="mouseIn(5,10)" onmouseout="mouseOut(5)" class="star"></div>
</div>
Código 100% em PHP com o estilo/javascript/jquery inseridos
<?php
$_1 = 3;
$_2 = 5;
$_3 = 7;
$_4 = 10;
$_5 = 15;
$total = $_1 + $_2 + $_3 + $_4 + $_5;
if ( $total != 0 )
{
// porcentagem
$porcent_1 = ($_1 / $total) * 100;
$porcent_2 = ($_2 / $total) * 100;
$porcent_3 = ($_3 / $total) * 100;
$porcent_4 = ($_4 / $total) * 100;
$porcent_5 = ($_5 / $total) * 100;
}
echo "
<script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script>
function mouseIn(star,percentual){
$('.p-'+star).html(percentual+'%');
}
function mouseOut(star){
$('.p-'+star).html('');
}
</script>
<style>
.inline {
margin-left: 10px;
height: 80px;
display: inline-block;
}
.percentage {
margin-left: 12px;
display: inline;
}
.star {
background-image: url('https://cdn1.iconfinder.com/data/icons/web-interface-part-2/32/star-512.png');
width: 50px;
height: 50px;
background-size: contain;
float:initial;
}
</style>
<div class='inline'>
<div class='text'>
<p class='percentage p-1'></p>
</div>
<div onmouseover='mouseIn(1,$porcent_1)' onmouseout='mouseOut(1)' class='star'></div>
</div>
<div class='inline'>
<div class='text'>
<p class='percentage p-2'></p>
</div>
<div onmouseover='mouseIn(2,$porcent_2)' onmouseout='mouseOut(2)' class='star'></div>
</div>
<div class='inline'>
<div class='text'>
<p class='percentage p-3'></p>
</div>
<div onmouseover='mouseIn(3,$porcent_3)' onmouseout='mouseOut(3)' class='star'></div>
</div>
<div class='inline'>
<div class='text'>
<p class='percentage p-4'></p>
</div>
<div onmouseover='mouseIn(4,$porcent_4)' onmouseout='mouseOut(4)' class='star'></div>
</div>
<div class='inline'>
<div class='text'>
<p class='percentage p-5'></p>
</div>
<div onmouseover='mouseIn(5,$porcent_5)' onmouseout='mouseOut(5)' class='star'></div>
</div>
"
?>