0

我正在尝试使用 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 不会删除/隐藏。有人可以建议如何做到这一点吗？

4

2 回答 2

0

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

$('.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 事件，将它们分别连接起来，您将能够对其进行排序。

于 2012-04-29T01:01:22.460 回答
0 
$('.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');
    }
});
于 2012-04-29T01:10:13.577 回答