如何用CSS实现鼠标悬停时单个div背景图铺满多div效果？

嗨，这个交互效果挺有意思的！我之前刚好做过类似的需求，给你分享两个纯CSS就能搞定的方案，完全不用JS~

方法一：父容器共享背景 + 子元素遮罩 #

这个思路的核心是把所有背景图预先绑定到父容器上，通过子元素的hover状态触发父容器切换背景，同时让其他子元素透明，从而实现“当前div背景铺满整个区域”的视觉效果。

HTML结构 #

<div class="image-container">
  <div class="image-item"></div>
  <div class="image-item"></div>
  <div class="image-item"></div>
  <div class="image-item"></div>
</div>

CSS代码 #

/* 父容器：网格布局，承载所有背景图 */
.image-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* 2x2布局，可根据需求调整 */
  gap: 8px; /* 子元素间的间距 */
  width: 600px;
  height: 600px;
  position: relative;
  background-size: cover;
  background-position: center;
  transition: background-image 0.3s ease; /* 背景切换的平滑过渡 */
}

/* 子元素：默认用白色背景遮罩父容器的背景 */
.image-item {
  background-color: #ffffff;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

/* hover父容器内任意子元素时，让其他子元素透明 */
.image-container:hover .image-item {
  opacity: 0;
}
/* 保持当前hover的子元素不透明（可选，也可以设为0让整个容器只显示背景图） */
.image-container:hover .image-item:hover {
  opacity: 1;
}

/* 给每个子元素绑定对应的背景图，hover时切换父容器背景 */
.image-container:has(.image-item:nth-child(1):hover) {
  background-image: url('你的第一张图地址');
}
.image-container:has(.image-item:nth-child(2):hover) {
  background-image: url('你的第二张图地址');
}
.image-container:has(.image-item:nth-child(3):hover) {
  background-image: url('你的第三张图地址');
}
.image-container:has(.image-item:nth-child(4):hover) {
  background-image: url('你的第四张图地址');
}

说明 #

这里用到了CSS的:has()选择器，它能检测父容器内子元素的状态，进而给父容器设置样式。子元素默认的白色背景会挡住父容器的背景图，hover时其他子元素变透明，父容器的目标背景就会完全展示出来，视觉上就像是当前hover的div背景铺满了整个区域。

注意：:has()选择器目前已被主流浏览器支持，如果需要兼容旧版浏览器，可以参考下面的第二种方法。

方法二：子元素伪元素全屏覆盖 #

这个思路是给每个子元素设置独立背景图，当hover时，通过子元素的伪元素生成一个全屏的背景层，继承当前子元素的背景图，并通过动画从当前位置扩展到整个容器，效果更灵动。

HTML结构 #

<div class="image-container">
  <div class="image-item" style="background-image: url('你的第一张图地址')"></div>
  <div class="image-item" style="background-image: url('你的第二张图地址')"></div>
  <div class="image-item" style="background-image: url('你的第三张图地址')"></div>
  <div class="image-item" style="background-image: url('你的第四张图地址')"></div>
</div>

CSS代码 #

.image-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: 600px;
  height: 600px;
  position: relative;
  overflow: hidden; /* 防止伪元素溢出容器 */
}

.image-item {
  background-size: cover;
  background-position: center;
  cursor: pointer;
  position: relative;
  z-index: 1;
}

/* hover时生成全屏伪元素，继承当前子元素的背景图 */
.image-item:hover::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  z-index: 10; /* 层级设为最高，覆盖所有子元素 */
  animation: expand-bg 0.3s ease forwards; /* 扩展动画 */
}

/* 定义从当前位置扩展到全屏的动画 */
@keyframes expand-bg {
  to {
    top: 50%;
    left: 50%;
    /* 计算尺寸，包含gap的宽度，刚好覆盖整个容器 */
    width: calc(100% * 2 + 8px);
    height: calc(100% * 2 + 8px);
    transform: translate(-50%, -50%);
  }
}

说明 #

这个方法不需要依赖:has()选择器，兼容性更好。伪元素的动画可以自定义，比如调整动画时长、曲线，甚至改成淡入效果，灵活性很高。需要注意的是，计算伪元素的最终尺寸时要把容器的gap算进去，避免出现留白。

额外注意事项 #

• 背景图尽量设置background-position: center，这样扩展后不会出现明显的偏移。
• 可以根据需求调整过渡/动画的时长，0.3s是比较适中的速度，你也可以改成0.5s让效果更平缓。
• 如果子元素的布局不是2x2，需要对应调整grid-template-columns和伪元素的最终尺寸。

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