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 { {1}}。您必须在right: 0; bottom: 0上再次移除div（当悬停结束时）。

但是，我在这里已经阅读过，表格单元格中的绝对定位可能存在问题（现在无法找到它......）因此它可能无法正常工作。

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

mouseOut

Answer 2

好的，有两件事：

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

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

~~如果您需要更多帮助，那么您需要显示HTML结构，最好使用jsFiddle。~~

修改：我发现你现在已经启动了HTML。如果您希望相对于悬停图像显示，则每个.enlargeImage都需要.enlargeImage。

Answer 3

好的，我需要使用每个循环和qtip来获得我想要的东西...感谢您的帮助：

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

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

3 个答案: