实施悬停卡鼠标事件

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/