Div 悬停在另一个 Div - 高度/宽度答案

【问题标题】：Div Hovering Over Another Div - Height/WidthDiv 悬停在另一个 Div - 高度/宽度
【发布时间】：2011-10-23 17:06:58
【问题描述】：

我试图让一个 div 悬停在另一个充满内容的 div 上。这可以使用 position:absolute 和 z-index 来完成。问题是我希望悬停的 div 与充满内容的 div 的高度和宽度相同。

我已经尝试了 100% 的高度和宽度，但自从我写了：

<div class=hover></div><div id=content>FULL OF CONTENT</div>

悬停 div 无法识别内容 div 的高度和宽度。

有什么建议吗？

【问题讨论】：

标签： html hover

【解决方案1】：

将悬停的 div 放入另一个 div：

/* CSS */
#content {
  position: relative;
}
.hover {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

<div id="content">
  Content goes here.
  <div class="hover">
  </div>
</div>

悬停 div 可能仅位于内容上方。如果您在外部 div 上设置任何边框或边距，悬停 div 将不会覆盖它。

【讨论】：

谢谢，我相信我唯一的错误是我没有将 position:relative 放在外部 div 上，因为我确实尝试将 hoverdiv 放在内部。让我试试这个，看看它是否适合我。
是的，亲戚很重要。悬停 div 将绝对定位到也具有位置的第一个父级。如果您不将position: relative 添加到父 div，则悬停 div 将绝对定位到 body。
现在我只是想通过 div 显示内容，如果我在悬停 div 上放置悬停样式。我知道我可以做透明，但 IE 对透明效果很差！