Javascript 实现hovercard mouseout事件

我正在为我的网站实现气垫卡。将鼠标悬停在任何用户名上时，就会显示悬停卡。我使用mouseenter事件加载hovercard，并使用mouseout隐藏它

//HTML
<span class="hover_div">
    <a class="show_hovercard" user_name="gaurav">Gaurav</a>
</span>

// JavaScript
$('.show_hovercard').on({
   'mouseenter': function(e) {
       var $current_node = $(this);
       var $parent = $current_node.parent();
       var markup = "<p class='hovercard'>Gaurav's hovercard</p>";
       $parent.append(markup);
    }
});

$('.hover_div').on({
   'mouseout': function(e) {
        var $hovercard = $(this).find('.hovercard');
        $hovercard.remove();
    }
});

//HTML
我认为您的javascript语法有错误

您的代码：

$('.hover_div').on({
   '.mouseout': function(e) {
        var $hovercard = $(this).find('.hovercard');
        $hovercard.remove();
    }
});

应该是：

$('.hover_div').on({
   'mouseout': function(e) {
        var $hovercard = $(this).find('.hovercard');
        $hovercard.remove();
    }
});

更新：
我设法解决了你的问题。将p元素更改为div元素，因为p元素有边距且不一致。然后将mouseout改为mouseleave。这是一把小提琴：

请提供一个工作示例，包括jsFiddle上的CSS或类似内容，使您的工作变得非常容易。我添加了一个指向工作jsFiddle的链接，感谢您的回复Ovidiu。那是个打字错误。更正。你能帮个忙吗？但我想留点余地。此外，是否可以延迟mouseleave事件的触发。如果鼠标离开hover_div超过一秒钟，hovercard才会隐藏，那就太好了。您可以在删除操作上使用setTimeout，如下所示：setTimeout（function（）{$hovercard.remove（）；}，1000）；而不仅仅是：$hovercard.remove（）；对于边距，也可以使用嵌套的div来实现相同的视觉效果。只要第一个div就在目标链接的旁边，你就可以了。但问题是，悬停卡会在一秒钟后被移除。如果鼠标在第二次移动之前又回到hover_div，我不想移除hovercard。我想你必须问另一个问题，或者用新的进度编辑当前的问题，因为这越来越复杂。