Question

我将图像保存为精灵（星形），最初用于改变悬停状态的颜色。我想根据班级名称调整其用途来显示X个数量的星星。

我知道更改背景位置会改变悬停时显示的图像，因为图像是垂直放置的。

实施例

.sprite {
 width:46px;
 height:44px;
 background:url(image.gif) 0px 0px;
}        

.sprite:hover{
  background: url(image.gif) 0px 44px;
}

我希望能够将图像重复一定的长度，以便在悬停时显示x个恒星数量，1,2,3或4.所显示的恒星数量将是预先定义的，这可能吗？

目前，我所制作的例子显示了4颗星，因为在div中有多少适合，如果我的div更宽，那么就会显示更多的星星。

我做了一个JSFiddle有两个例子，第一个用普通的div来表示我想要实现的东西，第二个是使用一个li元素，这是我正在努力的一个。

Answer 1

我不完全确定你在这里会发生什么，但这里有一个关于<li>的实例的小提琴：

http://jsfiddle.net/nsFRq/3/

以下是代码：

$('.rateable').hover(function () {
    $(this).find('.text').stop().hide();
    $(this).find('.rate').stop().animate({
        left: 400,
        opacity: "show"
    }, 1500);
}, function () {
    $(this).find('.rate').stop().hide();
    $(this).find('.text').stop().fadeIn(1000);
});

Answer 2

您可以使用课程和多个背景： http://jsfiddle.net/qvAPz/3/

.rate50 {
    background:
         url('https://s3-eu-west-1.amazonaws.com/richlewisprofile/assets/images/rate.png') 40px -24px no-repeat,
         url('https://s3-eu-west-1.amazonaws.com/richlewisprofile/assets/images/rate.png') 60px -24px no-repeat, 
         url('https://s3-eu-west-1.amazonaws.com/richlewisprofile/assets/images/rate.png');
}

在悬停时使用li内的精灵图像

2 个答案: