-3

我之前也问过这个问题，但我没有得到任何解决方案。我在我的网站上遇到问题，其中 facebook 安装在页面的完全右侧，并且当鼠标悬停在它上面时会移动并显示。请[删除垃圾邮件链接]查看。

问题是当我将鼠标悬停在它上一次它显示时，如果我将鼠标悬停在它上面两到三次它没有显示任何东西。有时即使在第一次鼠标悬停时也不会显示任何东西。

我想让它像另一个网站 [垃圾邮件链接已删除]，它会再次显示并且 agian 并且没有问题。

我的html代码是

<div id="fb-root"></div>
<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 id="facebook_tab">
    <a id="facebooklink" href="https://www.facebook.com/fe driksa" title="Fe dri on Facebook" onmouseover="document.getElementById('showme').style.display = 'block';this.style.display='none';"></a>
    <div id="showme" onmouseout="document.getElementById('facebooklink').style.display='block';this.style.display='none';">
        <div class="fb-like-box" data-href="http://www.facebook.com/fe driksa" data-width="292" data-show-faces="false" data-stream="true" data-header="true"></div>
    </div>
</div>

我的CSS代码是

#facebook_tab
{
    display: block;
    width: 38px;
    height: 102px;
    background: url("{T_THEME_PATH}/images/facebook_tab.png") no-repeat 0 0;
    right:0px;
    top:200px;
    position:fixed;
}

#facebook_tab span
{
    display: none;
}

#facebook_tab:hover {
width:292px;
padding-left:32px;
}

#facebook_tab:hover span
{
    display:block;
background-color:#fff;
border:2px solid #999;
border-radius:5px;
}
4

1 回答 1

0

这可以完全用 css 完成（除了 facebook 内容的加载）。

即使是平滑的动画也应该使用css 过渡来完成

html 和加载 facebook like 框：

<div id="facebook-wrapper">
  <a id="facebooklink" href="https://www.facebook.com/fedriksa" title="Fedri on Facebook"></a>
  <div id="fb-root"></div>
</div>
<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/de_DE/all.js#xfbml=1";
 fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

你的CSS：

#facebook-wrapper {
  position: fixed;
  top: 50%;
  width: 220px; // put the width of your facebook box + width of your facebook link here
  right: -200px; // this should be the width of your facebook box
}

#facebook-wrapper:hover {
  right: 0
  transition: right 2s;
  -moz-transition: right 2s; /* Firefox 4 */
  -webkit-transition: right 2s; /* Safari and Chrome */
  -o-transition: right 2s; /* Opera */
}

请注意，这是未经测试的，但应该让您了解如何执行此操作！

于 2012-12-16T18:53:21.493 回答