悬停时，精灵图像向下移动

Question

我正在使用精灵来改变图像在悬停状态下的颜色，但是当我将鼠标悬停在图像上时，它会稍微向下移动并改变颜色。我创建了一个 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;
 }

我正在使用此图片：

任何人都可以指出我的错误吗？

Answer 1

<强>原因

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

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

<强>解决方案

background:url(star.png) 0 0;

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

参见 jsFiddle demo

关于图片的说明

另请注意，您当前的精灵高34px，而每颗星似乎只有16px高。这意味着两颗星之间存在2px间隙，因此第二个background-position为-18px而不是-16px。

Answer 2

.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州的height和:hover。您应该在this网站

上找到有关css sprires的信息性指导

Answer 3

首先：你应该使用16px“方框”（宽度/高度）为你的星星而不是18，因为你的星星的宽度为16px。

然后正确更改偏移量，您的问题就会减少。