如何在悬停时切换图片且不破坏并排布局的容器？

纯CSS实现（推荐） #

完全可以用纯CSS实现你要的悬停切换效果，不需要JS。核心思路是把两张图片放在同一个容器内，通过定位让它们重叠，利用:hover伪类配合过渡动画切换显示状态。

修改后的HTML #

给图片容器添加第二张图片，确保两张图都在.easter-egg里：

<section class="blu">
    <div class="container reveal">
        <div class=" box1">
            <h1 class="revealsl fix">big test</h1>
            <p ></p> 
            <div class="revealsl fix buffer" id="line1">
                <span id="a"><p>test</p></span><span id="b">A secret website easter egg!<br> </span>
            </div>
            <button class="button" style="vertical-align:middle"><span>button </span></button>
        </div>
      <div class="box2">
        <div class="easter-egg">
            <img src="https://images.saymedia-content.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:eco%2Cw_1200/MTk2NzY3MjA5ODc0MjY5ODI2/top-10-cutest-cat-photos-of-all-time.jpg" class="home-pic main-img">
            <img src="替换为你的hover图片地址" class="home-pic hover-img">
          </div>
      </div>
</section>

修改后的CSS #

给.easter-egg设置相对定位，让两张图片绝对重叠，通过opacity和transition实现平滑过渡：

/* 新增的CSS */
.easter-egg {
    position: relative;
    height: 100%;
    width: 100%;
}

.home-pic {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover; /* 保持图片比例填充容器 */
    transition: opacity 0.3s ease; /* 平滑过渡效果 */
}

.hover-img {
    opacity: 0; /* 默认隐藏hover图 */
}

.easter-egg:hover .main-img {
    opacity: 0; /* 悬停时隐藏主图 */
}

.easter-egg:hover .hover-img {
    opacity: 1; /* 悬停时显示hover图 */
}

/* 保留你原有的其他CSS */
.blu {
    background: #3D5A6C;
    position: relative;
}

.box1{
    height: 500px;
    width: 500px;
    background: #B287A3; 
    text-align: center;   
    justify-content: center;
}
.box1 h1 {
      margin: 0px;
      padding: 0px;
      margin-top: 175px;

}
.box2{
    height: 500px;
    width: 500px;
    overflow: hidden; /* 防止图片溢出 */
}
      
.container {
    background: #3D5A6C;
    display: flex;
    justify-content: center;
    padding: 5%;
    column-gap:20px;
}
      
.container box2, box1 {
    padding: 2%;
}

  .button {
    display: inline-block;
    border-radius: 4px;
    background-color: #433A3F;
    border: none;
    color: #FFFFFF;
    text-align: center;
    font-size: 20px;
    padding: 10px;
    width: 200px;
    transition: all 0.5s;
    cursor: pointer;
    margin: 2px;
    overflow: hidden;
  }
  
  .button span {
    cursor: pointer;
    display: inline-block;
    position: relative;
    transition: 0.5s;
  }
  
  .button span:after {
    content: '\2708';
    position: absolute;
    opacity: 0;
    top: 0;
    right: -20px;
    transition: 0.5s;
  }
  
  .button:hover span {
    padding-right: 25px;
  }
  
  .button:hover span:after {
    opacity: 1;
    right: 0;
}
.sev-won {
    text-decoration: none;

}
  div#line1 span#a {
    display: inline;
  }
  
  div#line1:hover span#a {
    display: none;
  }
  
  div#line1 span#b {
    display: none;
    text-align: center;
  }
  
  div#line1:hover span#b {
    display: inline;
  }

这样就能实现主图→悬停显示hover图→离开恢复主图的平滑切换效果，完全符合你的需求。

JavaScript实现方案 #

如果一定要用JS实现，思路是监听容器的mouseenter和mouseleave事件，切换图片的src或者控制图片的显示状态。

修改后的HTML（只保留一张图） #

<section class="blu">
    <div class="container reveal">
        <div class=" box1">
            <h1 class="revealsl fix">big test</h1>
            <p ></p> 
            <div class="revealsl fix buffer" id="line1">
                <span id="a"><p>test</p></span><span id="b">A secret website easter egg!<br> </span>
            </div>
            <button class="button" style="vertical-align:middle"><span>button </span></button>
        </div>
      <div class="box2">
        <div class="easter-egg">
            <img src="https://images.saymedia-content.com/.image/ar_1:1%2Cc_fill%2Ccs_srgb%2Cfl_progressive%2Cq_auto:eco%2Cw_1200/MTk2NzY3MjA5ODc0MjY5ODI2/top-10-cutest-cat-photos-of-all-time.jpg" class="home-pic" id="swap-img">
          </div>
      </div>
</section>

JavaScript代码（基础版） #

const imgElement = document.getElementById('swap-img');
const mainSrc = imgElement.src;
const hoverSrc = '替换为你的hover图片地址';

imgElement.parentElement.addEventListener('mouseenter', () => {
    imgElement.src = hoverSrc;
});

imgElement.parentElement.addEventListener('mouseleave', () => {
    imgElement.src = mainSrc;
});

JavaScript代码（带平滑过渡） #

如果想要平滑过渡，可以预加载图片并配合opacity动画：

const imgElement = document.getElementById('swap-img');
const mainSrc = imgElement.src;
const hoverSrc = '替换为你的hover图片地址';

// 预加载hover图片，避免切换时加载延迟
const hoverImg = new Image();
hoverImg.src = hoverSrc;

imgElement.parentElement.addEventListener('mouseenter', () => {
    imgElement.style.opacity = '0';
    setTimeout(() => {
        imgElement.src = hoverSrc;
        imgElement.style.opacity = '1';
    }, 300); // 对应CSS过渡时间
});

imgElement.parentElement.addEventListener('mouseleave', () => {
    imgElement.style.opacity = '0';
    setTimeout(() => {
        imgElement.src = mainSrc;
        imgElement.style.opacity = '1';
    }, 300);
});

同时给图片添加CSS过渡：

.home-pic {
    transition: opacity 0.3s ease;
}

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