0

CSS Hover を使用して、「マウスオーバー」と「マウスアウト」で Div 要素を表示/非表示にしています。

私の問題は、Fb のようなボタンが Firefox と IE ブラウザの「マウスオーバー」イベントで表示されず、Chrome で作業が行われることです。

同じ問題がさらに発生していますが、まだ修正できません。

ここに私のCSSがあります:

div#show-social, .subscribe:hover>div#div-social {
display: none;
}

.subscribe:hover>div#show-social {
display: block;
}

HTML:

<script>
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<div class="subscribe">
    <div id="div-social">Show is avaible</div>
    <div id="show-social">
    <!-- FB like button not Showing while Hover on this (problem with Firefox and IE) -->
       <span class="fb-like" data-href="my-URL" data-send="false" data-layout="button_count" data-width="150" data-show-faces="false"></span>
    </div>
</div>

ここにデモがあります（Google Chormeでテストできます。動作しますが、Firefoxは動作しません） http://jsfiddle.net/happi/D52j2/

どうすればこれを修正できますか。すべての助けに感謝します。

4

1 に答える 1

1

要素を表示しているときはいつでも（またはおそらく最初だけ）、facebookのいいねボタンを再レンダリングする必要があります。

var subscribe = document.getElementsByClassName("subscribe")[0],
    showSocial = document.getElementById("show-social"),
    rendered = false;

// Wait that facebook script has been loaded
window.fbAsyncInit = function () {
    // FB variable is now accessible
    subscribe.onmouseover = function () {
        if (!rendered) {
            // Re-render the Facebook like button.
            FB.XFBML.parse(showSocial);
            rendered = true;
        }
    };
};

編集: 私のコードには 1 つのバグがありました。

于 2013-06-04T05:07:12.540 に答える