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

发布于 2024-12-11 14:31:25 字数 307 浏览 0 评论 0原文

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

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

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

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

有什么建议吗？

原文

I am attempting to have one div hovering over another div full of content. This can be done using position:absolute and z-index. The problem is I want the hovering div to be the same height and width of the div full of content.

I've tried 100% height and width, but since I wrote:

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

the hover div doesn't recognize what the height and width of the content div is.

Any suggestions?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

剩余の解释 2024-12-18 14:31:25

将悬停 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 将不会覆盖它。

Put the hovering div inside the other 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>

The hover div may be only over the content. If you set any borders or margins on the outer div, the hover div will not cover that.

回复收藏 0 原文

~没有更多了~