-3

以前にもこの質問をしましたが、解決策がありませんでした。Facebook がページの完全に右側にインストールされ、マウスをその上に置くと移動して表示される Web サイトの問題に直面しています。[スパムリンクを削除]してご覧ください。

問題は、マウスを1回上に置くと表示され、2回または3回マウスを上にすると何も表示されないことです。最初のマウスオーバーでも何も表示されないことがあります。

別のウェブサイトのようにしたい [スパムリンクが削除されました], そこでは再び表示されますが、問題はありません.

私の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 のようなボックスの読み込み:

<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 に答える