0

我正在使用 CSS Hover 来显示/隐藏带有“mouseover”和“mouseout”的 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>

这是 DEMO（您可以在 Google Chorme 上进行测试。它可以工作。但 Firefox 没有） http://jsfiddle.net/happi/D52j2/

我怎样才能解决这个问题。感谢所有帮助。

4

1 回答 1

1

每当您显示元素时（或者可能只是第一次），您都需要重新渲染 facebook like 按钮。

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

编辑：我的代码有一个错误，它是 getElementById 而不是 getElementsById，我改进了它，正如我在括号中提到的，你只需要第一次渲染 facebook 按钮。

于 2013-06-04T05:07:12.540 回答