javascript - 点击图像

Question

当我将鼠标悬停在某个数字上时会显示评级，但当我点击该数字时评级不会保持可见。出于某种原因，当我使用背景颜色而不是背景 url 时，它工作正常。有人可以帮我解决这个问题吗？

最终结果应该是这样的:1 - 将鼠标悬停在一个数字上，应该会出现一张评级图像。2 - 选择一个数字后，该评级图像应保持可见。3 - 当选择另一个数字时，评级图像应该出现，而前一个图像消失。

这是一个演示 link .

Answer 1

这个怎么样？

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; }

脚本:

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