css悬停在图像上

我有一个简单的问题。我将尝试用一个示例代码进行解释

td中的图像

<td style="text-align:right;"><a class="ratingstar" href="javascript:rate('1','27')" title="1"><img src="assets/images/star.png" alt="*" /></a></td>

所以，当我在图像上悬停时，它会向上移动一点，给人一种提升的感觉。问题是，同时td的高度增加，所以下面的元素被压下

如何在提升图像的同时保持td的大小不变。我可以增加td的高度来解决这个问题，但由于这是一个移动站点，我不想将特定高度设置为大小，而是根据内部内容进行扩展

---

我希望这已经足够清楚了。

您可以使用负上边距执行此操作：

.ratingstar:hover img, .ratingstar:focus img
{
   margin-top: -3px;
}

或者，如果您不需要实际图像，您可以使用背景图像和定位来轻松地完成此操作

.ratingstar
{
   background-image: url(assets/images/star.png);
   background-position: 0 0;
   background-repeat: no-repeat;
}
.ratingstar:hover img, .ratingstar:focus img
{
   background-position: 0 -3px;
}

第一个解决方案（见CSS技巧网站）：使用相对定位，如

.ratingstar:hover img, .ratingstar:focus img {
  position: relative;
  bottom: 3px;
}

第二种解决方案：如果您的设计允许，当边距底部从0变为3px时，将填充底部从3变为0px。

---

编辑：也可以是上边框或下边框（与背景颜色相同，如果不是渐变色或图像，而是唯一的颜色）

我需要图像，它是一个分级显示系统，图像也可以根据给定的分级列出页边距top works。公平地说，我将不得不接受Felipe Alsacreations的回答，因为它之前已经发布了。不用担心，很高兴你找到了你的解决方案。它们都是优雅的解决方案。我自己更喜欢背景图像解决方案，因为它允许在精灵中包含图像。

.ratingstar:hover img, .ratingstar:focus img {
  position: relative;
  bottom: 3px;
}