在悬停时在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伪类，但它们需要正确的doctype（以及良好的盛行风） 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>