javascript - 实现悬停卡鼠标移出事件

Question

我正在为我的网站实现悬浮卡。将鼠标悬停在任何用户名上时会显示悬停卡。我使用 mouseenter 事件加载悬停卡，并使用 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();
    }
});

.hovercard 类是绝对定位的。

我希望悬停卡在从用户名移动到卡片时不隐藏。但是当我从用户名移动到悬停卡时，悬停卡被隐藏。应该做什么？

这是正在运行的 jsFiddle: http://jsfiddle.net/L6D47/1

Answer 1

我认为您的 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。这是一个工作 fiddle :

http://jsfiddle.net/NLXkV/6/