悬停时显示一个 DIV，但位于另一个悬停在其上的 DIV 内。带有CSS

Question

我试图得到它，所以当我将鼠标悬停在一个 DIV 上时，另一个 DIV 会显示在该 DIV 内但显示在当前内容之上。因此，如果我有一个 500 像素 x 500 像素的 DIV，其中显示了书籍封面，当我将鼠标悬停在它上面时，父 DIV 的 90% x 90% 的另一个 DIV 将出现在其中，显示书籍详细信息，但位于书籍封面之上。

到目前为止，我所做的就是使 div 出现在悬停时，但它们被添加到父级拉伸中，制作滚动条等。

我尝试过使用display:none和display:block和visibility隐藏，并搜索负载，但似乎都不允许在当前内容上显示DIV。

这个小提琴是我能得到的最接近的，但它不会覆盖主 DIV 中的内容，也不局限于主 DIV。http://jsfiddle.net/vereonix/kPPFv/

    *{
    margin:0;
    padding:0;
}
#content{
    height:100%;
    width:100%;
    background-color: #CCCCCC;
    padding:0;
    margin:0;
    position:absolute;
}
#hoverbar{
    height:90%;
    width:90%;
    background-color: #666;
    position:absolute;
    visibility:hidden;
    margin-left: 5%;
    margin-top: 5%;
}
#content:hover > #hoverbar{
    visibility:visible;
}

<div id="content">
    image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br>image<br>
    <div id="hoverbar">
        details
    </div>
</div>

与该网站类似的内容： http: //studionudge.com/

遗憾的是，我没有任何当前代码可以显示，因为我只是尝试进行小规模测试来找到解决方案。我已经尝试过诸如这些 SOF 问题的答案之类的事情：

仅使用 CSS，将鼠标悬停在 <a> 上时显示 div

CSS 悬停时显示另一个元素

但没有一个提供我认为可以使用的结果。

我觉得我可能需要使用模式框获取元素类型处理，尽管我从未在悬停时使用过，仅在单击时使用过。

希望这个问题是有效的，我很乐意让它发挥作用 - 汤姆

Answer 1

您可以position像这样使用属性：

网页

<div class="book">
  <div class="info">More info here</div>
  <div class="image">
      Image here
  </div>
</div>

CSS

.book {
  position:relative;
}
.info {
  position:absolute;
  top:0;
  left:0;
  z-index:1;
  display:none;
}
.book:hover .info{
  display:block;
}

演示http://jsfiddle.net/6ReTK/10/

要获得一些效果，您可以使用 Jquery Fading方法或使用 CSS 过渡：

info {
  transition:opacity 1s;
  opacity:0;
}
.book:hover .info{
  opacity:1;
}

另一个演示http://jsfiddle.net/6ReTK/12/