jQueryホバー上でdivをロードし、そのdivとやりとりできるようにする

Question

Facebookの社会フィードに読み込むホバーを作成しようとしています& Twitter。

私はjQueryを一緒に持っています。しかし、私は、ユーザーがボタンを飛び越してすぐにフェードアウトし、情報をクリックすることができないという問題を抱えています。

私はこのためにjsFiddleを作成しました。ご覧のとおり、コンテンツを読み込んでいます。しかし、ロードされた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'); 
}); 

Answer 2

あなたが非表示にmouseout方法を設定しているのでdivを認識していません。 $.hoverメソッドの2番目の関数パラメータは、マウスがターゲットを離れるときに何をすべきかを実際に指示しています。

ここにあなたの更新フィドルです：あなたは、「エリア」だけでラッパー要素を定義し、それにmouseoutを追加離れるときhttp://jsfiddle.net/ujBZY/2/

それらを非表示にするには、両方：

$('.main-area').mouseout(function() { 
    $('.social_facebook').hide(); 
    $('.social_twitter').hide(); 
}); 

を念頭に置いて、あなたの社会的な要素をキープその領域内になければならないため、表示プロパティの一部を変更する必要があります。

Answer 3

このような何かを試してみてください：http://jsfiddle.net/ujBZY/9/

ul { 
    margin:0; 
    padding:0; 
} 
li.social { 
    display: inline-block; 
    list-style:none; 
    overflow:visible; 
} 
a { 
    display: block; 
    height: 61px; 
    margin: 0 5px; 
    text-indent: -9000px; 
    width: 61px; 
} 

.social_facebook, .social_twitter { 
    position: absolute; 
    right:0; 
    background: white; 
    z-index: 1000; 
} 

.sociallinks { 
    float: right; 
} 

.facebook { 
    background: url(http://i44.tinypic.com/smys80.png) no-repeat; 
} 

.twitter { 
    background: url(http://i44.tinypic.com/10fno04.png) no-repeat; 
} 
<div class="span5"> 
    <div class="sociallinks"> 
     <ul> 
      <li class="social"><a href="#" target="_blank" class="facebook" title="Join Us on Facebook">Join us on Facebook</a> 
       <!-- Hidden Social Feeds --> 
       <div class="social_facebook"> 
         FACEBOOK HERE 
       </div> 
      </li> 
      <li class="social"><a href="#" target="_blank" class="twitter" title="Follow Us on Twitter">Follow us on Twitter</a> 
       <div class="social_twitter">  
        <a href="http://twitter.com/" title="Follow us on Twitter">Latest Tweet</a> 
        <a href="https://twitter.com/twitter" class="twitter-follow-button" data-show-count="false" data-lang="en" data-size="large">Follow @twitter</a> 

        <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
       </div> 
      </li> 
     </ul>     
    </div> 
</div> 


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

$('.social').hover(function() { 
    $('div', this).stop().fadeIn("slow"); 
}, function() { 
    $('div', this).stop().fadeOut("slow"); 
});