Отображать изображение в тд при наведении

Question

Вот что я пытаюсь достичь (не уверен, если это вообще возможно):

Наведите указатель мыши на тд и в правом нижнем углу тд (возможно, перекрывая границу ячейки),показать маленькое изображение.

Я в порядке с jQuery, поэтому я могу справиться с зависанием, но CSS убивает меня.Как мне расположить изображение?Буду ли я иметь изображение в каждой камере и показывать его только при наведении?Или есть лучший способ?

Я на IE7.Я ценю любое руководство.

Answer 1

Чтобы не помещать изображение в каждый тд на странице, вы также можете использовать фоновое изображение:

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

Если вы этого не сделаетехотите использовать: наведите курсор на jquery, чтобы добавить и удалить класс.Эквивалентный CSS для этого будет:

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

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

, где ".hoverclass" - это имя класса, которое вы добавляете к td в течение периода наведения мыши.

Answer 2

Для позиционирования необходимо использовать абсолютное позиционирование. 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>

Answer 3

Что-то в этом роде покажет и скроет изображения в тд.

td img
{
 display:none;
}

td:hover img
{
 display:block;
}