Наложение div "edit image" на элемент div, td

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>

Я бы добавил div, используя jQuery для ролловера с предындией.

Answer 1

Поместите ваше 'edit image' после контента, чтобы оно отображалось над фактическим контентом (элементы, которые появляются позже в источнике, имеют более высокий 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>

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();
    });
});

Это предполагает, что каждый TD с буквой P является редактируемым. Тем не менее, вы можете добавить класс для повышения производительности селектора и использовать что-то вроде $("td.editable p")