Question

我有：

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并将其显示在悬停在父元素上，但它没有显示。为什么这对这两个浏览器无法正常工作？

Answer 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

Answer 2

使用你提供的代码是不可行的。

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

所以没有什么可以悬停。

CSS3：子元素的悬停效果 - Firefox和资源管理器不起作用

2 个答案: