jQuery hover/mousedown problem

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.

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