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'); 
    } 
});