Hi,
I wonder if anyone could shed some light on the following issue. It’s one of those that I just can’t get my head around at the moment, even to the extent that I can guarantee its possible.
I have a control (its a rating control) which I can however hover to display a rating. It’s pure css so no javascript. The back end is database driven through asp .net but that’s just for info.
I have 5 rating images, when I move across the rating from left to right, more stars are highlighted. What I would like to also do is display some text, like this
star star star star star rating text
the html is quite simple:
<div class=“star-rating”>
<img class=“star rating1”>
<img class=“star-rating2”>
<img>
<img>
<img>
</div>
CSS
.rating-control .star-ratings {float:left;position:relative;width:120px;height:20px;background:url(…/images/rating_scale.png) no-repeat -120px 0;}
.rating-control .star {position:absolute;z-index:100;width:24px;height:20px;outline:none;}
.rating-control .star:hover {left:0;z-index:2;width:120px;height:20px;overflow:hidden;background: url(…/images/rating_scale.png) no-repeat 0 0;}
.rating-control .rating1 {left:0;}
.rating-control .rating2 {left:24px;}
.rating-control .rating3 {left:48px;}
.rating-control .rating4 {left:72px;}
.rating-control .rating5 {left:96px;}
.rating-control .rating1:hover {background-position:-96px -20px;}
.rating-control .rating2:hover {background-position:-72px -20px;}
.rating-control .rating3:hover {background-position:-48px -20px;}
.rating-control .rating4:hover {background-position:-24px -20px;}
.rating-control .rating5:hover {background-position:0 -20px;}
Thanks in advance.