0

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 関数内にラップされています。

前もって感謝します、

4

3 に答える 3

2

どちらかを表示したい場合は、以下のアプローチを試してください。

デモ

$(".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');
});
于 2012-04-13T15:14:01.793 に答える
1

mouseout知らず知らずのうちに を非表示にする方法を設定しているdivからです。メソッドの 2 番目の関数パラメーターは、$.hover実際には、マウスがターゲットから離れたときに何をすべきかを伝えています。

更新されたフィドルは次のとおりです: http://jsfiddle.net/ujBZY/2/

「エリア」を離れるときに両方を非表示にするには、ラッパー要素を定義して a を追加mouseoutします。

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

ソーシャル要素はその領域内にある必要があることに注意してください。そのため、表示プロパティの一部を変更する必要があります。

于 2012-04-13T15:12:57.847 に答える
1

次のようなものを試してください: 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");
});
于 2012-04-13T15:19:17.360 に答える