div、td要素のオーバーレイdiv「編集画像」

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インデックスを持っている上に表示されますので、内容の後にあなたの「編集画像」を入れて：

HTMLに

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

をあなたは既にjQueryのを使用している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

ので、これはあなたが探しているものかもしれません：

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

これは、Pを持つすべてのTDが編集可能であると仮定しています。ただし、セレクタのパフォーマンスを向上させるためにクラスを追加する場合は、$("td.editable p")