Question

I am trying to create a hover to load in social feeds for Facebook & Twitter.

I have got the jQuery together. But I am having a problem that as soon as a user hovers out of the button it fades out and you cannot click the information.

I have created a jsFiddle for this and as you can see, You hover over the a.social it loads the content in. But as soon as you try to interact with the loaded DIV it dissapears.

How can I make it so that the user can still click on the information within the opened div?

jQuery Code is as follows :

$(".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");
    });

This is wrapped within a document.ready function..

Thanks in advance,

Answer 1

I suppose you wanted to show either one of those, if so try below approach.

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