jQuery 悬停/鼠标按下问题

发布于 2024-11-09 05:54:05 字数 702 浏览 0 评论 0原文

大家好，我觉得这应该不会太难。如果鼠标悬停在该单元格上，我会在该单元格中显示图像。

我有一个表格：

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

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

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

原文

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.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

乖乖兔^ω^ 2024-11-16 05:54:05

你可以确保只有一张图片

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

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

回复收藏 0 原文

~没有更多了~