Hello everyone, I have a little challenge that I believe shouldn't be too complicated. What I want to achieve is displaying an image in a cell when the mouse hovers over it.
Here's the setup:
<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 here's the jQuery function I'm using:
$(function() {
$('#selectable td div').hover(function() {
$(this).append("<img src='img.png' />");
}, function() {
$(this).find("img").remove();
});
});
Everything seems to work well as long as the user hovers without clicking the mouse. However, if the mouse is pressed and moved, the image gets added multiple times to the same cell (resulting in overlap) and does not get removed. You may need to test this out to understand what I mean.
Why is this happening? And what can I do to resolve it? Your insights are greatly appreciated. Thank you.