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 和 Internet Explorer。我打算隐藏 Facebook div 并在将鼠标悬停在父元素上时显示它，但它没有显示。为什么这对于这两个浏览器都不能正常工作？

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

使用您提供的代码，它不可能工作。

当您将内容设置.home-product-display-box为display: none;并且没有为其设置宽度和高度时，div 会将其大小调整为内容的大小。在您的情况下，宽度为 0px，高度为 0px。

所以没有什么可以悬停的。

于 2012-12-26T19:31:14.467 回答