Logo悬停时页面左侧全屏纵向背景图实现问题求助

我正在做一个展示两个Logo的落地页，想要实现鼠标悬停左侧Logo时，页面左侧从上到下铺满背景图，但现在背景图只填充了Logo所在的div容器。自己编程能力有限，现有代码是找别人写的，尝试把图片放到left-bg的CSS里也没解决。

问题核心是背景容器的定位范围错误——当前.left-bg是相对于宽度仅50%的.left-logo容器定位，所以只能覆盖这个小区域。要实现全屏左侧背景，需要调整背景容器的层级和定位规则：

修改后的完整代码 #

CSS 代码 #

body {
  background-color: white;
  margin: 0; /* 清除浏览器默认边距 */
}

.container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  position: relative;
  z-index: 1; /* 确保Logo始终显示在背景图上方 */
}

.row {
  display: flex;
  width: 80%;
}

.left-logo,
.right-logo {
  width: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.left-logo img,
.right-logo img {
  opacity: 0;
  transition: opacity 5s;
}

/* 重新定义全屏背景容器 */
.left-bg, .right-bg {
  position: fixed; /* 固定定位，基于整个视口 */
  top: 0;
  bottom: 0;
  opacity: 0;
  transition: opacity 0.5s;
  background-size: cover;
  background-position: center;
  z-index: 0; /* 把背景放在Logo下方 */
}

.left-bg {
  left: 0;
  right: 50%; /* 占满页面左半部分 */
  background-image: url(images/bg-left.png);
}

.right-bg {
  left: 50%; /* 占满页面右半部分 */
  right: 0;
  background-image: url(images/bg-right.png);
}

/* 悬停Logo时触发背景显示 */
.left-logo:hover ~ .left-bg {
  opacity: 1;
}

.right-logo:hover ~ .right-bg {
  opacity: 1;
}

.left-logo img,
.right-logo img {
  opacity: 1;
}

HTML 代码 #

<body>
  <div class="container">
    <div class="row">
      <div class="left-logo">
        <img src="images/logo-left.png" alt="Left Logo">
      </div>
      <div class="right-logo">
        <img src="images/logo-right.png" alt="Right Logo">
      </div>
    </div>
    <!-- 把背景容器移到container内，作为Logo的同级元素 -->
    <div class="left-bg"></div>
    <div class="right-bg"></div>
  </div>
</body>

关键调整点 #

• 将背景容器从Logo的子元素改为.container的同级元素，用fixed定位实现全屏覆盖
• 通过left/right属性精确划分左右背景的占比区域
• 用z-index控制层级，保证Logo始终在背景图上方
• 提前在CSS中定义背景图，避免悬停时加载图片的延迟

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