如何实现图片并排布局+悬停切换下方全宽对应描述？

我希望实现这样的效果：鼠标悬停在每张图片上时，显示对应的不同文本内容，用于制作公司员工简介。我尝试了flex、div、列表等布局方式，但发现若文本与图片不在同一元素内，CSS无法实现该交互效果，请问是否只能通过JavaScript解决？我是自学前端的，问题若有疏漏还请见谅。

我编写的简化代码 #

HTML代码：

<div id="headshot-row">
<div id="headshot-1">headshot1</div>
<div id="headshot-2">headshot2</div>
<div id="headshot-3">headshot3</div>
<div id="headshot-4">headshot4</div>
</div>

<div id="bios">
<div id="bio-1">bio1</div>
<div id="bio-2">bio2</div>
<div id="bio-3">bio3</div>
<div id="bio-4">bio4</div>
</div>

期望的CSS逻辑：

#headshot-row {
margin: 0 auto;
display: flex;
justify-content: space-around;
}

#bios {
margin: 0 auto;
display: none;
}

#headshot-1:hover #bio-1 {
display: block
}

解决方案 #

不一定非要用JavaScript，CSS也能实现，核心是调整结构或利用CSS选择器特性，以下是具体方案：

方案一：调整HTML结构（推荐）

把每个头像和对应的简介放在同一个容器中，利用CSS的后代选择器实现悬停效果，结构更清晰合理：

<div id="staff-container">
  <div class="staff-item">
    <div class="headshot">headshot1</div>
    <div class="bio">bio1</div>
  </div>
  <div class="staff-item">
    <div class="headshot">headshot2</div>
    <div class="bio">bio2</div>
  </div>
  <div class="staff-item">
    <div class="headshot">headshot3</div>
    <div class="bio">bio3</div>
  </div>
  <div class="staff-item">
    <div class="headshot">headshot4</div>
    <div class="bio">bio4</div>
  </div>
</div>

对应的CSS：

#staff-container {
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

.staff-item .bio {
  display: none;
  margin-top: 10px;
}

.staff-item:hover .bio {
  display: block;
}

方案二：不调整结构，用CSS :has() 伪类（现代浏览器支持）

如果不想修改原有HTML结构，可以利用:has()伪类选择包含悬停头像的父元素，再控制对应简介的显示：

#headshot-row {
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
}

#bios > div {
  display: none;
  margin: 10px auto;
}

/* 悬停对应头像时显示对应简介 */
#headshot-row:has(#headshot-1:hover) ~ #bios #bio-1 {
  display: block;
}
#headshot-row:has(#headshot-2:hover) ~ #bios #bio-2 {
  display: block;
}
#headshot-row:has(#headshot-3:hover) ~ #bios #bio-3 {
  display: block;
}
#headshot-row:has(#headshot-4:hover) ~ #bios #bio-4 {
  display: block;
}

注意：:has()伪类不支持IE浏览器，仅在Chrome、Firefox、Edge等现代浏览器可用。

方案三：JavaScript实现（兼容旧浏览器）

如果需要兼容旧浏览器，用JavaScript控制是更稳妥的方式，通过监听鼠标事件切换简介的显示状态：

const headshots = document.querySelectorAll('[id^="headshot-"]');
const bios = document.querySelectorAll('[id^="bio-"]');

headshots.forEach((headshot, index) => {
  // 鼠标进入时显示对应简介，隐藏其他简介
  headshot.addEventListener('mouseenter', () => {
    bios.forEach(bio => bio.style.display = 'none');
    bios[index].style.display = 'block';
  });
  
  // 鼠标离开时隐藏所有简介（可选）
  headshot.addEventListener('mouseleave', () => {
    bios.forEach(bio => bio.style.display = 'none');
  });
});

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