I have recently installed a star rating system onto my website, and I followed an online tutorial and developed the system to my liking. It has been pretty easy to tweak the tutorial code so far but, I've hit a brick wall with one issue. All of the stars (there are ten) are set to change colors when you mouse over them, this is done by keeping all the links in a ul class and setting each one to different classes as in the following example code:
<ul class="star-rating">
<li class="already-rated" style="width:30%;">Currently 3/5 Stars.</li>
<li><a href="/insertreview.php" title=".5 stars out of 10" class="half-star">.5</a></li>
as you can see it sets a default width (30%, which shows the first 3 stars highlighted in red) depending on the current rating, which determines the starting "rating" (i.e. how many are red when the page first loads), and when they mouse over the links it changes the color to blue as they hover so they can see where they would be rating.
.star-rating a,
.star-rating .current-rating,
.star-rating .already-rated{
position:absolute;
top:0;
left:0;
text-indent:-1000em;
height:25px;
line-height:25px;
outline:none;
overflow:hidden;
border: none;
}
.star-rating a:hover,
.star-rating a:active,
.star-rating a:focus{
background-position: left center;
}
"left center" turns it a blue color (since the center of the image is all blue stars).
This is the css for how the link hover stuff works:
.star-rating a.half-star{
width:5%;
z-index:20;
}
.star-rating a.one-star{
width:10%;
z-index:19;
}
.star-rating a.onehalf-star{
width:15%;
z-index:18;
}
etc. etc. all the way to 10.
Now, finally, onto the problem. Whenever you click on one of the rating stars it will change to that color....so if you click on the 5'th star the first 5 stars will change color to red....however, if you click off, which I assume means taking focus off of the links, then it reverts back to the original rating. I would like to make it so after you click on a star it will show that as the new rating and it will not revert back to the original if it looses focus.
It's actually important to the way the website works for this to happen, as otherwise the layout would be confusing....so any help would be greatly appreciated.
I'm not terribly great with css so I don't know if I posted enough or too much here....but if I need to post anything else or any more examples to help you guys help me, then just let me know.
Thanks a lot for considering helping me :) - it'd be greatly appreciated!
--Tony
