悬停后保留背景图像？

Question

我正在尝试建立一个星级评级类型系统，并且我正在处理css部分。我已经这样做了，用css中的背景图像通过背景图像替换了点亮的星星，如下所示：

.hover-stars:hover{
    background-image: url(http://www.softwares.com/img/icons/favorites.png);
    background-repeat: no-repeat;       
}

我想要尝试并且知道的是实现悬停后的影响，因此一旦用户悬停在图像上，图像就会保留在那里。并且如果可能的话撤消，如果用户应该再次将鼠标悬停在它上面。为了创造幻觉，明星正在追随用户的鼠标踪迹。

我试过这个，但它不起作用。

.hover-stars:hover:after{
    background-image: url(http://www.softwares.com/img/icons/favorites.png);
    background-repeat: no-repeat;
}

Answer 1

:after选择器在元素后插入内容。所以这不是使用它的正确方法。我不相信你想要的东西可以用CSS完成。你可以通过adding或removing类来查看jQuery，为hover上的元素提供帮助。例如......

$(".hover-stars").hover(
function () { $(this).addClass(".hover-star-after")
});​

然后添加要添加的额外CSS类......

.hover-stars-after {
background-image: url('http://www.softwares.com/img/icons/favorites.png');
background-repeat: no-repeat;
}