在懸停時以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>