實施懸停卡鼠標移出事件

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。 這是一個工作的小提琴：

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