javascript - jQuery 图像悬停在多个动态图像之上

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 在悬停在 a 标记之后动态附加一个 .enlargeImage 元素，并为所有表格单元格提供一个 position: relative 和 .enlargeImage 一个 right: 0;底部:0。您必须在 mouseOut 上(悬停结束时)再次删除 div。

但是，我在这里的某处读到，表格单元格内的绝对定位可能存在问题(现在找不到...)，因此它可能无法按预期工作。

一些未经测试的示例代码:

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

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