Блог

Всем привет, я чувствую, что это не должно быть слишком сложно. Я показываю изображение в ячейке, если мышь находится над этой ячейкой.

У меня есть таблица:

 <table id="selectable">
    <tr>
        <td><div><input type="text" id="in1" /></div></td>
        <td><div><input type="text" id="in2" /><div></td>
    </tr>
</table>
  

И функция jQuery:

 $(function() {
    $('#selectable td div').hover(function() {
        $(this).append("<img src='img.png' />");
    }, function() {
        $(this).find("img").remove();
    });
});
  

Все это отлично работает, если пользователь наводит курсор без нажатия мыши, но если мышь нажата и перемещена, изображение добавляется МНОГО раз в одну и ту же ячейку (вы можете видеть наложение) и не удаляется. Вероятно, лучше всего протестировать это, чтобы понять, что я имею в виду.

Почему? И как мне это исправить? Спасибо.

вы можете убедиться, что есть только одно изображение

 $('#selectable td div').each(function() {
 var img = $("<img src='img.png' />");
 $(this).hover(function() {
   $(this).append(img);
 }, function() {
   img.detach();
 });
});