CSS悬停在图像上答案

【问题标题】：css hover on imageCSS悬停在图像上
【发布时间】：2010-06-24 20:01:09
【问题描述】：

我有这个简单的问题。我会尝试用示例代码来解释

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>

这张图片的CSS

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

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

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

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

【问题讨论】：

标签： css focus hover

【解决方案1】：

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

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

第二种解决方案：如果您的设计允许，当 margin-bottom 从 0 到 3px 时，使用 padding-bottom 从 3 到 0px。
编辑：它也可以是边框顶部或底部（与背景颜色相同，如果它不是渐变或图像而是独特的颜色）

【讨论】：

【解决方案2】：

您可以使用负上边距来做到这一点：

.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;
}

【讨论】：

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