Question

嘿所有，我觉得这不应该太难。如果鼠标超过那个单元格，我会在单元格中显示图像。

我有一张桌子：

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

如果用户在没有按下鼠标的情况下悬停，这一切都可以正常工作，但如果按下并移动鼠标，图像会被添加到同一个单元格中很多次（您可以看到重叠）并且不会删除。最好先测试一下，看看我的意思。

为什么呢？我该如何解决？感谢。

Answer 1

你可以确保只有一张图片

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

jQuery悬停/ mousedown问题

1 个答案: