1

我正在使用精灵来更改悬停状态下图像的颜色，但是当我将鼠标悬停在图像上时，它会稍微向下移动并改变颜色。我创建了一个 JSFiddle来复制问题。

我可能错误地使用了精灵？我不确定，因为这是我第一次和他们一起玩。

.ratings ul li {
width:18px;
height:18px;
background:url(star.png) 145px 102px;
}

.ratings ul li:hover{
width:18px;
height:18px;
background:url(star.png) 145px 86px;
 }

我正在使用这张图片： 在此处输入图像描述

谁能指出我的错误？

4

3 回答 3

4

原因

精灵配置不正确。在您的示例中，至少其中一个background-position值应为零或负数。

CSS sprites的技术依赖于负值background-position来改变图像中用作元素背景的区域。相反，正值（即大于零）background-position实际上会改变背景图像在元素中的位置。

解决方案

background:url(star.png) 0 0;

background:url(star.png) 0 -18px;

参见jsFiddle 演示

关于图像的注意事项

另请注意，您当前的精灵34px很高，而似乎每颗星都16px很高。这意味着2px两颗星之间存在差距，所以第二颗background-position是-18px和不是-16px。

于 2013-02-20T09:26:42.730 回答
3 
.ratings ul li {
  width:16px; /* redefine your image offset */
  height:16px; 
  background:url(http://i.stack.imgur.com/S5T0M.png) no-repeat;
}
.ratings ul li:hover {
  background-position: 0 -18px;
}

你不需要定义你已经在哪个width状态。您应该在此站点上找到有关 css sprires 的信息指导height:hover

于 2013-02-20T09:33:29.407 回答
2

首先：你应该为你的星星使用一个16px“盒子”（宽度/高度）而不是 18，因为你的星星的宽度是16px.

然后正确地改变你的偏移量，你会遇到更少的问题。

于 2013-02-20T09:33:41.013 回答