jQuery 图像悬停在多个动态图像之上答案

【问题标题】：jQuery Image Hover on top of multiple dynamic imagesjQuery 图像悬停在多个动态图像之上
【发布时间】：2011-02-13 08:58:13
【问题描述】：

好的，所以我有一个完整的图像表，并且只想在悬停时始终在每个图像的右下角显示一个小图标。任何想法我如何做到这一点？现在我有这个，它只是每次都在同一个位置显示悬停图像......它需要显示在悬停图像的顶部。谢谢！

.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>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我会使用 jQuery 在悬停的a 标记之后动态附加一个.enlargeImage 元素，并为所有表格单元格提供position: relative 和.enlargeImage 一个right: 0; bottom: 0。您必须在 mouseOut 上再次删除 div（当悬停结束时）。

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

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

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

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

【讨论】：

'el = $('.enlargeImage'); $('.table_imageThumbs a').hover( function() { el.appendTo(this).show(); }, function() { el.remove(); });'
这可行，但每次都会在同一个位置显示“.enlargeImage”图标......使用“位置（）”以某种方式获取它相对于 div 的位置然后放置它呢？有任何想法吗？谢谢！
@webwrks 你没有完全复制我的例子；我正在添加一个新元素，而您正在选择一个现有元素（您需要从代码中删除该 div）。您还需要我的答案第一部分中的css 修改。
@jeroen，我尝试了代码 'el = $("
") .addClass("enlargeImage"); $('.table_imageThumbs a').hover( function() { el.appendTo(this).show(); }, function() { el.remove(); });'
我得到了相同的结果...div也被删除了...我使用的唯一修改是'show（）'函数，因为'enlargeImage'类被隐藏了......现在我被困住了……

【解决方案2】：

好的，有两件事：

如果您想显示正确的.enlargeImage，您需要执行以下操作：

$(this).siblings('.enlargeImage').show(); //depends on whether .enlargeImage is a sibling
您需要使父元素包含图像和图标position: relative，以便.enlargeImage 的position: absolute 相对于正确的父元素。

~~如果您需要更多帮助，则需要展示您的 HTML 结构，最好使用jsFiddle。~~

编辑：我看到你现在已经有了你的 HTML。如果您希望它相对于悬停的图像显示，则需要在每个 <td> 中添加一个 .enlargeImage。

【讨论】：

好的，谢谢你的帮助，我现在都在尝试，但不能给 ' '.enlargeImage' 类，因为它会完全隐藏图像......我'会及时通知你。

【解决方案3】：

好的，伙计们，我需要使用 each 循环和 qtip 来获得我想要的...感谢帮助：

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

【讨论】：