jquery将元素添加到Div并隐藏在鼠标移出

Question

我正在尝试使用jquery将一个页脚div添加到另一个div中，并在悬停时显示新添加的页脚div，然后慢慢淡入/隐藏。这是我想出了迄今为止代码：

<script type="text/javascript"> 
$('.xg_widget_main .module_forum .vcard').hover(function(){ 
$(this).append($('.module_forum .xg_module_foot').show('show')); 
}); 
</script> 

我这个代码所面临的障碍是，所附的div将不服从.show（“秀”）功能，鼠标移开后从悬停区域附加的div不会慢慢淡出，但瞬间。有人能告诉我在这里错过了什么吗？

好吧，我得到了代码中使用的工作：

<script type="text/javascript"> 
$('.xg_widget_main .module_forum .vcard').hover(function(){ 
$('.module_forum .xg_module_foot').hide().appendTo(this).show('slow'); 
}); 
</script> 

但是，当鼠标移动离开所附的DIV不会删除/隐藏（“.xg_widget_main .module_forum .vcard”）。有人可以建议如何做到这一点？

Answer 1

因为实际上您在mouseout上请求的行为与鼠标悬停时不同，所以悬停是错误的解决方案。悬停管理两种行为。

$('.xg_widget_main .module_forum .vcard').mouseover(function(){ 
$('.module_forum .xg_module_foot').hide().appendTo(this).fadeIn('slow'); 
}); 

$('.xg_widget_main .module_forum .vcard').mouseout(function(){ 
$('.module_forum .xg_module_foot').fadeOut('slow'); 
}); 

看看mouseover和mouseout事件，单独挂钩它们，你就可以将它们整理出来。

Answer 2

$('.xg_widget_main .module_forum .vcard').on({ 
    mouseenter : function() { 
     $('.module_forum .xg_module_foot').hide().appendTo(this).show('slow'); 
    }, 
    mouseleave: function() { 
     $('.module_forum .xg_module_foot').hide('slow'); 
    } 
});