JQuery Image Наведите курсор на несколько динамических изображений

Question

Хорошо, у меня есть полная таблица изображений, и я хочу всегда отображать маленький значок в правом нижнем углу каждого изображения при наведении курсора.Есть идеи, как мне это сделать?Прямо сейчас у меня есть это, и оно просто показывает изображение при наведении в одном и том же месте каждый раз ... оно должно отображаться поверх изображения, которое наведено.Спасибо!

.enlargeImage {
background:url(images/xxx) no-repeat;
position:absolute;
width:16px;
height:14px;
z-index:200;
display:none;
}

$('.table_imageThumbs a').mouseover(function(){
            $(this).show('.enlargeImage');
        });


<div class="enlargeImage"></div>

<table width="408" class="table_imageThumbs">
                  <tr>
                    <td width="102" class="td_thumb"><a><image width="75" height="97" class="img_vertThumb"></a></td>
                    <td width="102"><a><image width="75" height="97" class="img_vertThumb"></a></td>
                    <td width="102"><a><image width="75" height="97" class="img_vertThumb"></a></td>
                    <td width="102"><a><image width="75" height="97" class="img_vertThumb"></a></td>
                  </tr>
</table>

Answer 1

Я бы использовал jQuery для динамического добавления элемента .enlargeImage после тега a, который находится над ним, и дал бы всем ячейкам таблицы position: relative и .enlargeImage a right: 0; bottom: 0.Вы должны были бы снова удалить div на mouseOut (после окончания наведения).

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

Какой-то непроверенный пример кода:

el = $("<div>")
     .addClass("enlargeImage");

$('.table_imageThumbs a').hover(
  function() {
    el.appendTo(this);
  },
  function() {
    el.remove();
  });

Answer 2

Хорошо, ребята, мне нужно было использовать каждый цикл и qtip, чтобы получить то, что я хотел ... спасибо за помощь:

$('.table_imageThumbs img').each(function(){
          $(this).qtip({

Answer 3

ОК, две вещи:

1. Если вы хотите показать правильный .enlargeImage, вам нужно сделать что-то вроде:

   $(this).siblings('.enlargeImage').show(); //depends on whether .enlargeImage is a sibling

2. Вам нужно сделать родительский элемент, содержащий изображение и значок position: relative, чтобы position: absolute из .enlargeImage относился к правильному родителю.

Если вам нужна дополнительная помощь, вам нужно показать свою HTML-структуру, предпочтительно используя jsFiddle .

Редактировать: Я вижу, у вас есть ваш HTML сейчас. Вам понадобится .enlargeImage в каждом <td>, если вы хотите, чтобы он отображался относительно скрытого изображения.