Rating System – CSS simulating javascript

[raulsann]

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!

[raulsann]

It is working as expected in Firefox 4.0, but not in Chrome…..

[Author]

Posts