Help with a bit of tricky CSS

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.

There’s one easy cheaty way to do it, which is to make the star sprite wider and just put the text in the graphic alongside the relevant row of stars.

Alternatively, you could use the technique from css/edge to absolutely position text to appear when you hover over different items.

hi, thanks for the link but the css I already have does this bit. It’s the extra text i’m looking for.

Perhaps this can help you :slight_smile: