0

私は持っています：

HTML

<div class="home-product-display-box">
  <div>Lots of other stuff</div>
  <div class="fb-home-holder">
    <div class="fb-like" data-href="www.myurl.com" data-send="false" data-layout="button_count" data-width="50" data-show-faces="false" ></div>
  </div>

</div>

CSS

.home-product-display-box .fb-home-holder {
    position:absolute;
    top:5px;
    right:5px;
    display:none;
}

.home-product-display-box:hover .fb-home-holder {
     display:block !important;
}

これはWebkit（ChromeおよびSafari）で意図されたとおりに機能しますが、FirefoxおよびInternetExplorerでは機能しません。Facebook divを非表示にして、親要素にカーソルを合わせて表示するつもりですが、表示されません。これら2つのブラウザでこれが正しく機能しないのはなぜですか？

4

2 に答える 2

1

display:noneマウスホバーを受け取りませんが、次を使用できますopacity:0：

 .home-product-display-box .fb-home-holder {
    position:absolute;
    top:5px;
    right:5px; 

    /*CHANGE OPACITY*/
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0); /*ie*/
    -moz-opacity: 0;         /* Mozilla extension */
    -khtml-opacity:0;        /* Konqueror extension (Safari 1.1)*/
    opacity: 0;              /* the correct CSS3 syntax */
}

.home-product-display-box:hover .fb-home-holder {
    /*CHANGE OPACITY*/
    filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100); /*ie*/
    -moz-opacity: 1;         /* Mozilla extension */
    -khtml-opacity:1;        /* Konqueror extension (Safari 1.1)*/
    opacity: 1;              /* the correct CSS3 syntax */
}

例： http： //jsbin.com/epozag/6/edit

于 2012-12-26T19:32:58.923 に答える
0

あなたが与えたコードでは、それが機能することは不可能です。

コンテンツをに設定し、幅と高さを設定していない場合、divはコンテンツのサイズをコンテンツのサイズに調整します.home-product-display-box。display: none;あなたの場合、幅0px、高さ0pxです。

したがって、ホバリングするものは何もありません。

于 2012-12-26T19:31:14.467 に答える