javascript - 在悬停时显示一个 DIV，但在悬停在另一个 DIV 内。使用 CSS

Question

我正在尝试获取它，因此当我将鼠标悬停在一个 DIV 上时，另一个 DIV 将显示在该 DIV 中但显示在当前内容之上。因此，如果我有一个 500px x 500px 的 DIV，其中显示了书籍封面，当我将鼠标悬停在它上面时，另一个 DIV 90% x 90% 的父 DIV 将出现在其中显示书籍详细信息，但在书籍封面上。

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

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

这个 fiddle 是我能得到的最接近的，但它没有遍历主 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 问题的答案:

Using only CSS, show div on hover over <a>

CSS On hover show another element

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

我觉得我可能需要使用模态框获取元素类型交易，尽管我从来没有为悬停做过一次，只有一次点击。

希望这个问题是有效的，我很乐意让这个工作 -T​​om

Answer 1

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

HTML

<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/