Question

当我将鼠标悬停在DIV上并显示在该DIV中但是在当前内容上时，我正试着这样做。因此，如果我有500px乘500px DIV并显示书籍封面，当我将鼠标悬停在它上面时，另一个DIV 90％到90％的父DIV将显示在其中，显示书籍详细信息，但是在书籍封面上。

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

我尝试过使用display：none和display：block和visibility hidden，以及搜索的加载，但似乎没有一个允许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问题的答案：

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

CSS On hover show another element

但没有人提供我认为可以合作的结果。

我觉得我可能需要使用模态框获取元素类型的交易，虽然我从来没有做过悬停，只有onclick。

希望这个问题有效，我很想让这个工作-Tom

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/

Answer 2

margin-top和margin-left仅相对于其在DOM中的当前位置移动绝对定位的元素。 top，left，right和bottom是移动绝对定位元素的CSS规则。例如，如果您在小提琴中添加top: 0; left 0;，就会得到我认为您所描述的行为。

Answer 3

您只需添加绝对定位坐标：top:0和left:0。在这里小提琴：http://jsfiddle.net/kPPFv/2/

在悬停时显示DIV，但在另一个悬停在其上的DIV中显示。用CSS

3 个答案: