0

我将图像保存为精灵（星形），最初用于更改悬停状态的颜色。例如，我想调整它的用途以根据类名显示 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 元素，这是我正在努力解决的问题。

4

2 回答 2

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);
});
于 2013-06-23T19:56:40.870 回答
1

您可以使用类和多个背景：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');
}
于 2013-06-23T20:05:28.577 回答