Hi there guys, I am trying to implement a rating system with pure CSS and avoiding javascript as much as I can.
I have implemented a solution using CSS attributes, however, the CSS does not reload when the mouse changes from one star to the other. Check the result here:
http://jsfiddle.net/raulsan/CVsqH/11/embedded/result/
Basically, I have a container “starsContainer” with attributes “user_rating” and “pointer_value”
“user_rating” is the rating given by the user. If the rating is 3, only the first 3 stars will be yellow and the rest gray. “pointer_value” is changed when the mouse moves over the starsContainer. If the pointer is in the fifth star, the value of pointer_value would be 5. In this way, there will always be a CSS rule changing the color of the stars. The problem is that the style is not refreshing.
You can see all the code here:
http://jsfiddle.net/raulsan/CVsqH/11/
The result expected is something similar to the rating system in the wikipedia. Look at the end of this page:
http://en.wikipedia.org/wiki/Credit_rating
but as you can see, my CSS approximation does not work as expected yet.
Any help is much appreciated!
