仅用CSS实现鼠标悬停替换div：如何让悬浮div占据父元素位置？

问题根源 #

1. 选择器错误：原代码中h1:hover #h2无法选中目标元素，因为#h2是h1的同级元素，而非子元素
2. 缺少定位上下文：绝对定位元素未指定参考容器，导致位置偏移
3. 固定尺寸限制：硬编码宽高无法自适应填满父容器

修正方案 #

通过调整选择器、设置定位上下文、优化元素尺寸实现需求：

修正后的HTML

<div class="container">
  <h1>title</h1>
  <div id="h2">
    <h2>content</h2>
  </div>
</div>

修正后的CSS

/* 父容器设置定位上下文，统一控制尺寸 */
.container {
  position: relative;
  width: 25%;
  height: 200px;
}

/* 标题元素占满父容器 */
h1 {
  width: 100%;
  height: 100%;
  margin: 0; /* 清除默认边距避免间隙 */
}

/* 悬停显示的容器，绝对定位覆盖父容器 */
#h2 {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
}

/* 内容元素占满容器 */
h2 {
  width: 100%;
  height: 100%;
  margin: 0; /* 清除默认边距 */
}

/* 父容器hover触发状态切换，避免h1隐藏后失效 */
.container:hover #h2 {
  display: block;
}

.container:hover h1 {
  visibility: hidden;
}

关键调整说明 #

• 用父容器的hover事件替代h1的hover：避免h1隐藏后鼠标失去触发点，导致显示元素突然消失
• 绝对定位配合top/left/right/bottom: 0：让元素完全覆盖父容器，自适应父容器尺寸
• 清除默认边距：消除浏览器默认样式带来的间隙，确保元素无空隙填满父容器

内容的提问来源于stack exchange，提问作者audr