在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「編輯圖像」

回答

相關問題