jQuery 在悬停时加载 div 并能够与该 div 交互

Question

我正在尝试创建悬停以加载 Facebook 和 Twitter 的社交提要。

我已经把 jQuery 放在一起了。但我遇到了一个问题，即一旦用户将鼠标悬停在按钮之外，它就会淡出并且您无法单击该信息。

我创建了一个 jsFiddle为此，如您所见，您将鼠标悬停在 a.social 上，它会加载内容。但是一旦您尝试与加载的 DIV 交互，它就会消失。

如何才能让用户仍然可以点击打开的 div 中的信息？

jQuery代码如下:

$(".social_facebook").css('display','none');
$(".social_twitter").css('display','none');

    $('a.facebook').hover(function() {
        $('.social_facebook').fadeIn("slow");
    }, function() {
        $('.social_facebook').fadeOut("slow");
    });

    $('a.twitter').hover(function() {
        $('.social_twitter').fadeIn("slow");
    }, function() {
        $('.social_twitter').fadeOut("slow");
    });

这被包装在一个 document.ready 函数中..

提前致谢

Answer 1

我想你想展示其中任何一个，如果是的话，请尝试以下方法。

DEMO

$(".social_facebook").css('display','none');
$(".social_twitter").css('display','none');

$('a.facebook').mouseenter(function() {
    $('.social_twitter').fadeOut("slow", function () {
        $('.social_facebook').fadeIn("slow");
    });        
});

$('a.twitter').mouseenter(function() {
    $('.social_facebook').fadeOut("slow", function () {
        $('.social_twitter').fadeIn("slow");
    });        
});

 //Added
$('.social_facebook, .social_twitter').mouseout(function () {
   $(this).fadeOut('slow');
});