Question

我正在使用CSS Hover来显示/隐藏带有“mouseover”和“mouseout”的Div元素。

我的问题是Fb like按钮在Firefox和IE浏览器中没有显示“mouseover”事件，但在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/

我该如何解决这个问题。谢谢你的帮助。

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

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

Facebook Like按钮在加载隐藏元素后不显示

1 个答案: