Jquery将元素附加到Div并在鼠标移出时隐藏答案

【问题标题】：Jquery append element to Div and hide on mouseoutJquery将元素附加到Div并在鼠标移出时隐藏
【发布时间】：2012-04-29 00:57:52
【问题描述】：

我正在尝试使用 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('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>

但是，当鼠标离开 ('.xg_widget_main .module_forum .vcard') 时，附加的 div 不会删除/隐藏。有人可以建议如何做到这一点吗？

【问题讨论】：

标签： jquery hover append hide onmouseout

【解决方案1】：

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

$('.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 事件，将它们分别连接起来，您就可以解决问题了。

【讨论】：

【解决方案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');
    }
});

【讨论】：