實施懸停卡鼠標事件

Question

我正在爲我的網站實施懸浮卡。懸停卡片顯示在任何用戶名上盤旋。我使用mouseenter事件來加載懸停卡和鼠標來隱藏它。

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

class .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元素具有餘量並且不一致。然後將鼠標移至mouseleave。這裏是工作提琴：

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