Facebook Like按钮在加载时不显示隐藏 [英] Facebook Like buttons not displaying when loaded hidden

问题描述

我有点卡住这个。我有一个文章列表，其中包含链接到完整的文章。当你悬停在每个blurb上时，一个酒吧出现在包含社交共享按钮（FB，Twitter& G + 1）的blurb的底部。

http://jsfiddle.net/6Ukmb/

请注意，格式已被删除在jsfiddle示例中，G + 1不工作 - 这个问题不重要。

我的问题是FB like按钮没有正确加载。在Chrome中，一切都按预期工作。在FF或IE中，FB按钮加载隐藏，我不能让它们出现。

如果当页面仍在加载时，鼠标悬停在文章按钮之一上，那么该文章的FB按钮就会正常加载。如果FB完成加载时隐藏悬停效果，它不会出现爱和金钱。

我选择它分开，发现如果我删除css display：none; 从内容框.story-hover ，它加载正常。当然，这也意味着隐藏的面板加载可见，直到有人将鼠标悬停在他们的隐藏，这将无法工作。

我不知道如何解决这个问题一。另外，由于FB的按钮体积，我的开发版本有点慢，所以延迟显示：无，直到页面加载不会工作。

解决方案

使用CSS opacity 基本类似如下：

HTML

 < div class = div> 
< div class =social>< / div> 
< / div> 
  

CSS

  .div {
 opacity：0; 
 filter：alpha（opacity = 0）; 
} 
 .div：hover .social {
 opacity：1.0; 
 filter：alpha（opacity = 100）; 
} 
  

从这里你可以添加过渡效果，

I'm a bit stuck with this one. I have an article list with snippets that link off to the full article. when you hover over each blurb a bar appears at the bottom of the blurb that contaains social sharing buttons (FB, Twitter & G+1).

http://jsfiddle.net/6Ukmb/

Note that the formatting has been stripped down in the jsfiddle example, and G+1 isn't working - not important to this question.

My problem is with the FB like button not loading correctly. In Chrome, everything works as expected. In FF or IE the FB buttons load 'hidden' and I can't get them to appear.

If when the page is still loading your mouse is over one of the article buttons, the FB button for that article loads fine. If the hover effect is hidden when FB finishes loading, it will not appear for love nor money.

I've picked it apart and found that if I remove the css display: none; from content-box .story-hover, it loads fine. Of course that also means that the hidden panels load visible until someone hovers over them to hide, which won't work.

I can't figure out how to solve this one. Also, because of the volume of FB like buttons, it is a little slower on my dev build, so delaying the display:none until end of page load won't work either.

解决方案

Using the CSS opacity is a good option here.. something basic like this:

HTML

<div class="div">
  <div class="social"></div>
</div>

CSS

.div {
     opacity: 0;
     filter:alpha(opacity=0);
     }
.div:hover .social {
     opacity: 1.0;
     filter:alpha(opacity=100);
     }

From there you can add transitions to make it look nice!

这篇关于Facebook Like按钮在加载时不显示隐藏的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！