Question

我在一个可编辑的表中有一个div元素或td元素，即你单击该元素并弹出允许你编辑文本。我希望能够在可编辑元素的左上角添加“编辑图像”。目前，我所拥有的只是当你翻转元素时，背景变为黄色以表示。想要弹出更好的图像。尝试使用绝对div，但不确定我的样式设置是否正确，因为它无法正常工作。

<td>
   <div style="position:absolute; display:inline"><img src="/edit.png"/></div>
   <p>This would be the normal text that is editable</p>
</td>

我会在翻译时使用jQuery添加div并使用前置。

Answer 1

将“编辑图像”放在内容之后，使其显示在实际内容之上（源代码后面的元素具有更高的z-index：

HTML

<td>
   <div class="editable">
      <p>This would be the normal text that is editable</p>
      <img class="editimg" src="/edit.png"/>
   </div>
</td>

CSS

div.editable {
   width:100%;
   position:relative; /* this allows the img to be positioned relative to the div */
}
div.editable img.editimg {
   position:absolute;
   top:5px;
   right:5px;
}

Answer 2

由于您已经在使用jQuery，因此您可能正在寻找：

$(function(){
    $("td p").hover(function(){
      $(this).prepend("<img src='/edit.png' />");
    },function(){
      $(this).find("img:first").remove();
    });
});

这假设每个带有P的TD都是可编辑的。但是，您可能希望添加一个类来提高选择器的性能并使用$("td.editable p")

之类的内容

在div，td元素上叠加div“编辑图像”

2 个答案: