- This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
Viewing 2 posts - 1 through 2 (of 2 total)
- The forum ‘JavaScript’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › JavaScript › Rating System – CSS simulating javascript
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!
It is working as expected in Firefox 4.0, but not in Chrome…..