点击图片

Question

当我悬停一个数字时，会显示一个等级，但是当我点击该数字时，该等级不会保持可见。出于某种原因，当我使用背景颜色而不是背景网址时它工作正常。有人可以帮帮我吗？

最终结果如下： 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');
});

Answer 2

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