Question

我有一个div，当用户将鼠标悬停在它上面时，我想为它添加一个删除“按钮”。当用户将鼠标悬停在div上时，标记将插入div的末尾。问题是当用户的鼠标离开元素时，标签会再次插入。我想在用户的鼠标离开元素时删除标记。

这是div的原始状态：

<div class="tag" data-tag-id="123">hitman</div>

这是我将鼠标悬停在它上面时的样子：

<div class="tag" data-tag-id="123">hitman<div id="delete-123" style="float:right; padding-left:3px;">X</div></div>

当鼠标离开元素时：

<div class="tag" data-tag-id="123">hitman<div id="delete-123" style="float:right; padding-left:3px;">X</div><div id="delete-123" style="float:right; padding-left:3px;">X</div></div>

当鼠标离开时，“tag”div应该回到它的原始状态。

这是我的jQuery：

$('.tag').hover(function(){
    $(this).append('<div id="delete-'+$(this).data('tag-id')+'" style="float:right; padding-left:3px;">'+delete_markup+'</div>');
});
$('.tag').mouseleave(function(){
    $(this).remove('[id="delete-'+$(this).data('tag-id')+'"]');
});

Answer 1

hover()是一个注册mouseenter和mouseleave处理程序的工具，所以可以这样做

$('.tag').hover(function(){
    $(this).append('<div id="delete-'+$(this).data('tag-id')+'" style="float:right; padding-left:3px;">'+delete_markup+'</div>');
}, function(){
    $(this).remove('[id="delete-'+$(this).data('tag-id')+'"]');
});

或

$('.tag').mouseenter(function(){
    $(this).append('<div id="delete-'+$(this).data('tag-id')+'" style="float:right; padding-left:3px;">'+delete_markup+'</div>');
});
$('.tag').mouseleave(function(){
    $(this).remove('[id="delete-'+$(this).data('tag-id')+'"]');
});

如果您只将一个回调传递给hover(handlerInOut)，那么mouseenter和mouseleave

就会调用它

演示：Fiddle

Answer 2

你正在使用mouseleave和hover，只需用mouseenter替换悬停，那么它应该可以正常工作：

$('.tag').mouseenter(function(){
    $(this).append('<div id="delete-'+$(this).data('tag-id')+'" style="float:right; padding-left:3px;">'+delete_markup+'</div>');
});
$('.tag').mouseleave(function(){
    $(this).remove('[id="delete-'+$(this).data('tag-id')+'"]');
});

或者你可以在hover方法中使用mouseleave函数作为第二个函数。

Answer 3

hover = mouseenter+mouseleave;

在 hover 鼠标输入和下一个功能的第一个功能是鼠标离开

$('.tag').hover(function () {
    $(this).append('<div id="delete-' + $(this).data('tag-id') + '" style="float:right; padding-left:3px;">' + delete_markup + '</div>');
}, function () {
    $(this).remove('[id="delete-' + $(this).data('tag-id') + '"]');

});

描述：将两个处理程序绑定到匹配的元素，当鼠标指针进入并离开元素时执行。

当鼠标离开此元素时，为什么我的函数会触发？

3 个答案: