悬停时在 td 中显示图像

Question

这是我想要实现的目标（不确定是否可能）：

将鼠标悬停在 td 上，然后在该 td 的右下角（可能与单元格边框重叠）显示一个小图像。

我对 jQuery 没问题，所以我可以处理悬停，但 CSS 却让我头疼。如何定位图像？我是否会在每个单元格中都有图像，并且仅在悬停时显示它？或者有更好的方法吗？

我用的是IE7。我很感激任何指导。

Answer 1

为了避免将图像放入页面中的每个 td 中，您还可以使用背景图像：

td{
  background-image: url('/yourImage.png');
  background-position: -2000px -2000px;
}

td:hover{
  background-position: right bottom;
}

使用初始偏移量的原因是，它确保图像与页面一起预加载，因此在第一个过程中不会出现延迟鼠标悬停。

浏览器支持问题

我不确定不同浏览器对定位方向的支持程度如何，您可能还需要查看本文以确保 :hover 伪类在您的目标浏览器中正常工作。 IE7+ 将支持 :hover 伪类，但它们需要正确的文档类型（以及良好的盛行风）
http://www.bernzilla.com/item.php?id=762

使用 jQuery 代替

如果您不想使用 :hover 您可以坚持使用 jquery 来添加和删除类。等效的 CSS 是：

td{
  background-image: url('/yourImage.png');
  background-position: -2000px -2000px;
}

td.hoverclass{
  background-position: right bottom;
}

其中“.hoverclass”是您在鼠标悬停期间添加到 td 的类名。

Answer 2

类似的事情会在 td 中显示和隐藏图像。

td img
{
 display:none;
}

td:hover img
{
 display:block;
}

Answer 3

要进行定位，需要使用绝对定位。 CSS 应该是：

#id-of-td {
    position: relative;
}

#id-of-image {
    position: absolute;
    right: 0;
    bottom: 0;
}

HTML 应该类似于：

<td id="id-of-td">
    <img id="id-of-image" src="path/to/image" />
</td>