如何实现鼠标悬停左侧div文本时切换右侧div中的图片？

我正在把作品集网站拆分为两个独立div：左侧.main包含文本及悬停状态，右侧.box里的.photo当前显示一张静态图片。需要实现鼠标悬停左侧特定文字时，切换右侧的图片，但不清楚如何处理触发元素与图片容器相互独立的情况。以下是我写的初始代码：

初始CSS代码 #

.main {
width: 40%;
margin-left: 2%;
margin-top: 5%;
float: left;
font-family: "calluna-sans", sans-serif;
font-weight: 300;
font-style: normal;
color: black;
line-height: 0.8em;
font-size: 1.4em;
height: 100%;
}

.box {
margin-left:50%;
background-color: black;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
vertical-align: middle;

}

.photo {
position: relative;
}

初始HTML代码 #

<div class="main">
This paragraph will show image 1 on hover, image 2 on hover, and so on.
</div>

<div class="box">
<div class="photo">
<img src="https://picsum.photos/200/300">
</div></div>

解决方案1：JavaScript实现（推荐新手使用） #

这种方法逻辑直观，容易理解和扩展，适合处理独立元素间的交互。

修改后的HTML #

给每个需要触发图片切换的文本加上<span>标签，用data-img-src属性存储对应图片的地址，同时给右侧图片加id方便选择：

<div class="main">
  <span class="img-trigger" data-img-src="https://picsum.photos/200/300?img=1">悬停显示图片1</span>，
  <span class="img-trigger" data-img-src="https://picsum.photos/200/300?img=2">悬停显示图片2</span>，
  <span class="img-trigger" data-img-src="https://picsum.photos/200/300?img=3">悬停显示图片3</span>。
</div>

<div class="box">
  <div class="photo">
    <img id="main-photo" src="https://picsum.photos/200/300" alt="默认图片">
  </div>
</div>

补充CSS（可选，优化交互提示） #

给触发文本添加样式，提示用户可交互：

/* 原有CSS保留，新增以下内容 */
.img-trigger {
  color: #0066cc;
  text-decoration: underline;
  cursor: pointer;
}

JavaScript代码 #

通过事件监听实现图片切换：

// 获取所有触发元素和右侧图片
const triggers = document.querySelectorAll('.img-trigger');
const mainPhoto = document.getElementById('main-photo');
// 保存默认图片地址，用于鼠标离开时恢复
const defaultSrc = mainPhoto.src;

// 给每个触发元素绑定悬停事件
triggers.forEach(trigger => {
  // 鼠标移入时切换图片
  trigger.addEventListener('mouseover', () => {
    mainPhoto.src = trigger.dataset.imgSrc;
  });
  
  // 鼠标移出时恢复默认图片（按需选择是否保留）
  trigger.addEventListener('mouseout', () => {
    mainPhoto.src = defaultSrc;
  });
});

解决方案2：纯CSS实现（依赖:has选择器） #

如果不需要复杂逻辑，且浏览器支持:has选择器（目前主流浏览器均支持），可以用纯CSS实现：

修改后的HTML #

把所有图片放在.photo容器中，默认只显示默认图：

<div class="main">
  <span class="trigger-img1">悬停显示图片1</span>，
  <span class="trigger-img2">悬停显示图片2</span>，
  <span class="trigger-img3">悬停显示图片3</span>。
</div>

<div class="box">
  <div class="photo">
    <img class="default-img" src="https://picsum.photos/200/300" alt="默认图片">
    <img class="img1" src="https://picsum.photos/200/300?img=1" alt="图片1">
    <img class="img2" src="https://picsum.photos/200/300?img=2" alt="图片2">
    <img class="img3" src="https://picsum.photos/200/300?img=3" alt="图片3">
  </div>
</div>

修改后的CSS #

通过:has选择器监听左侧文本的悬停状态，控制右侧图片的显示：

/* 原有CSS保留，新增以下内容 */
/* 隐藏非默认图片，设置绝对定位让图片重叠 */
.photo .img1, .photo .img2, .photo .img3 {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
}

/* 悬停对应文本时，显示目标图片并隐藏默认图 */
.main:has(.trigger-img1:hover) .box .photo .img1 {
  display: block;
}
.main:has(.trigger-img1:hover) .box .photo .default-img {
  display: none;
}

.main:has(.trigger-img2:hover) .box .photo .img2 {
  display: block;
}
.main:has(.trigger-img2:hover) .box .photo .default-img {
  display: none;
}

.main:has(.trigger-img3:hover) .box .photo .img3 {
  display: block;
}
.main:has(.trigger-img3:hover) .box .photo .default-img {
  display: none;
}

/* 触发文本样式提示 */
.trigger-img1, .trigger-img2, .trigger-img3 {
  color: #0066cc;
  text-decoration: underline;
  cursor: pointer;
}

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