Simuler des écanvass de survol (faites avec des sélecteurs dans css)

Je saurais comment faire passer mon écanvas de classement toujours en fonction du résultat de la note moyenne (nombre généré aléatoirement de 1 à 5 et nombre généré de 10 à 55 pour le nombre de votes)? Puis-je simuler le survol avec jQuery sur mon écanvas? J’ai vu peu de solutions à des problèmes similaires, mais aucune n’a été utilisée dans leur CSS le sélecteur général de frère et soeur (~).

La fonctionnalité star hover doit être en pure css. Tout le rest peut être et est en js (jQuery). Lorsque le document est chargé, certaines écanvass doivent déjà survoler (en fonction du nombre moyen aléatoire) et lorsque l’utilisateur clique sur l’écanvas, la nouvelle valeur doit également affecter les écanvass en survol.

Voici un violon js illustrant mon problème: http://jsfiddle.net/kingSlayer/8ZbxB/

CSS

div.rating-star{ display:inline-block; width:30px; height:30px; background-image: url(star.png); background-size: contain; background-repeat: no-repeat; } div:hover div.rating-star { background-image: url(star-hover.png); background-size: contain; background-repeat: no-repeat; } div.rating-star:hover ~ div.rating-star { background-image: url(star.png); background-size: contain; background-repeat: no-repeat; }

HTML

JavaScript

 var averageRate = (Math.random() * 4) + 1; $('#showRating').text('Average rating: ' + averageRate.toFixed(1)); var numberOfRates = Math.floor((Math.random() * 55) + 1); function rating(rate) { var result = ((averageRate * numberOfRates) + rate) / (numberOfRates + 1); $('#showRating').text('Average rating: ' + result.toFixed(1)); } if (result  1.4 && result  2.4 && result  3 && result  4.4) { }