Question

Hey all, I feel like this shouldn’t be too hard. I show an image in a cell if the mouse if over that cell.

I’ve got a table:

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

And a jQuery function:

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

This all works fine if the user hovers without the mouse pressed, but if the mouse is pressed and moved, the image gets added MANY times to the same cell (you can see the overlapping) and does not remove. It is probably best to test this out to see what I mean.

Why? And how do I fix it? Thanks.

Answer 1

you can make shure theres only one img

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