在div，td元素上覆盖div“编辑图像”

我可以编辑表格中的div元素或td元素，即单击元素并弹出可让您编辑文本。我希望能够在可编辑元素的左上角添加一个“编辑图像”。目前，我所拥有的只是当你翻转元素时，背景变成黄色来表示。想要弹出更好的图像。尝试使用绝对的div，但不知道如果我的风格设置正确，因为它无法正常工作。在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与预先翻转。

来源

2009-05-26 mickyjtwin

把你的“编辑图片”后的内容，因此会出现实际的内容之上（即来源后有较高的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; 
}

来源

2009-05-26 02:20:12

既然你已经使用jQuery，这可能是你在找什么：

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

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

来源

2009-05-26 07:50:46

在div，td元素上覆盖div“编辑图像”

回答

相关问题