Question

When I hover a number a rating shows, but when I click on that number the rating does not stay visible. For some reason it works fine when I user background color instead of background url. Can someone please help me with this?

The end result should be as followed:
1 – hover an number and a rating image should appear.
2 – when a number is selected, that rating images should stay visible.
3 – when another number is selected that rating image should appear while the previous image fades.

Here is a demo link.

Answer 1

How’s this?

http://jsfiddle.net/uCZ6q/

HTML:

<div class="button">
    <a href="#"><div class="child1">1</div></a>
    <a href="#"><div class="child2">2</div></a>
    <a href="#"><div class="child3">3</div></a>
    <a href="#"><div class="child4">4</div></a>
    <a href="#"><div class="child5">5</div></a>
</div>

CSS:

.highlight 
{ background: url("http://cuuzo.com/level5.png") no-repeat 0 0; display: block; }

.child1:hover, .child2:hover, .child3:hover, .child4:hover, .child5:hover 
{ background: url("http://cuuzo.com/level5.png") no-repeat 0 0; }

Script:

$("a").click(function(){
    $(".highlight").removeClass('highlight')
    $(this).addClass('highlight');
});