在悬停时显示一个DIV，在悬停的另一个DIV.使用CSS

Display a DIV on hover, over but within another DIV which is hovered over. With CSS

本文关键字：DIV 悬停 使用 CSS 另一个 显示 一个      更新时间：2023-09-26

我正在尝试获取它，所以当我将鼠标悬停在一个div上时，另一个div将显示在该div内，但显示在当前内容上。因此，如果我有一个500px乘500px的DIV，其中显示了一本书的封面，当我将鼠标悬停在它上面时，父DIV的另一个90%乘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，将div悬停在<a>

CSS悬停时显示另一个元素

但没有一个能提供我觉得可以配合的结果。

我觉得我可能需要使用模态框获取元素类型的处理，尽管我从来没有在悬停时使用过，只在单击时使用过。

希望这个问题是有效的，我很想让这个工作-汤姆

您可以像这样使用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/

margin-top和margin-left甚至只相对于它们在DOM中的当前位置移动绝对定位的元素。top、left、right和bottom是用于移动绝对定位元素的CSS规则。例如，如果你在小提琴里加上top: 0; left 0;，你就会得到我认为是你描述的行为。

您只需要添加绝对定位坐标：top:0和left:0。Fiddle here：http://jsfiddle.net/kPPFv/2/

相关文章：