将图像悬停在td中的文本上

Question

我在使用jQuery悬停时动态地将图标添加到表格单元格。如何在单元格的右侧显示此图像，并在必要时重叠td内容？

我用Google搜索了一个小时但无济于事。

我不需要jQuery的帮助，主要是样式。

Answer 1

只需将具有浮点值的属性样式添加到此类

的图像中

<img src="..." style="float: right;" />

并在文本的开头添加img，文本将覆盖您的图像而不是覆盖它

Answer 2

遵循这些步骤。

1. 使其绝对定位，以便它不会出现文档流程
2. 给出顶部，左侧的值，以便它能够完全保留在您想要的任何地方

3. 您也可以使用jquery offset来获取父元素的值并使用该顶部和左侧属性的

   http://api.jquery.com/offset/

Answer 3

将<img/>位置设置为相对位置时，将<td/>置于绝对位置。

td{
    position:relative;
}
td img{
    position:absolute;
    top:0;
    right:0;
}

<强> Example on jsfiddle

修改

这在firefox中不起作用，因为<td/>不能有位置相对。 将<td/>中的内容包裹在<div/>中，它应该按预期工作。

<td>
    <div>
        Some text
        <img src="http://placekitten.com/50/50"/>
    </div>
</td>


td div{
    position:relative;
}
td img{
    position:absolute;
    top:0;
    right:0;
}

<强> Example