Overlay div "Bild bearbeiten" auf einem Div, Td-Element

Question

Ich habe entweder ein Div-Element oder Td-Element in einer Tabelle, die editierbar ist, d.h. Sie klicken auf das Element und Popup können Sie den Text bearbeiten. Ich möchte in der oberen linken Ecke des editierbaren Elements ein "Bild bearbeiten" hinzufügen können. Im Moment ist alles, was ich habe, wenn Sie das Element rollen, wechselt der Hintergrund zu gelb, um anzuzeigen. Möchte das Bild popup was schöner ist. Versucht mit einem absoluten Div, aber nicht sicher, ob ich die Style-Einstellungen korrekt habe, da es nicht richtig funktioniert.

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

Ich würde Zugabe des div mit einem prepend mit jQuery auf Rollover.

Answer 1

Setz dein ‚bearbeiten Bild‘ nach dem Inhalt, so dass es über den eigentlichen Inhalt (Elemente, die später in der Quelle kommen haben einen höheren Z-Index erscheint:

Die HTML

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

Die 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

Da Sie bereits jQuery verwenden, könnte dies sein, was Sie suchen:

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

Dies setzt voraus, dass jeder TD mit einem P editierbar ist. Sie können jedoch eine Klasse hinzufügen, um die Leistung des Selektors zu verbessern, und beispielsweise $("td.editable p")

verwenden