本文介绍一种纯 CSS 方案，利用 :has() 选择器实现左侧文本区域中特定文字的悬停，动态控制右侧独立容器内图片的显示与切换，无需 JavaScript，适合初学者快速上手。

本文介绍一种纯 css 方案，利用 :has() 选择器实现左侧文本区域中特定文字的悬停，动态控制右侧独立容器内图片的显示与切换，无需 javascript，适合初学者快速上手。

在构建响应式作品集网站时，常需将内容逻辑分离：左侧展示项目描述或技能标签（带交互），右侧实时呈现对应视觉素材（如项目截图、头像变体等）。当两个区域位于不同且无父子关系的 <div> 中时，传统 CSS 难以直接联动——但现代浏览器（Chrome 105+、Firefox 119+、Safari 15.4+）已广泛支持 <code>:has() 关系选择器，使其成为优雅解决该问题的关键。

✅ 核心思路：用 :has() 建立跨容器通信

:has() 允许父级或前序兄弟元素“感知”其内部/后续元素的状态。本例中，我们利用 .main:has(span:hover) 检测左侧 <span></span> 的悬停状态，并通过相邻兄弟选择器 + .box 定位右侧容器，再精准显示对应序号的 <img alt="如何通过 CSS 实现跨容器悬停触发图片切换" >。

✅ HTML 结构要点

• 将需触发切换的文本包裹在 <span></span> 中（每个 <span></span> 对应一张图片）；
• 右侧 .photo 内按顺序并列放置所有图片（不设 display: none 初始样式，由 CSS 统一控制）；
• 图片顺序必须与 <span></span> 顺序严格一致（第 1 个 <span></span> → 第 1 张 <img alt="如何通过 CSS 实现跨容器悬停触发图片切换" >）。

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

<div class="box">
  <div class="photo">
    <img src="https://picsum.photos/id/1015/200/300" alt="Project 1">
    <img src="https://picsum.photos/id/1016/200/300" alt="Project 2">
  </div>
</div>

✅ CSS 控制逻辑（关键代码）

/* 默认隐藏所有图片 */
.box .photo img {
  display: none;
}

/* 悬停第1个span → 显示第1张图 */
.main:has(span:nth-child(1):hover) + .box .photo img:nth-child(1) {
  display: block;
}

/* 悬停第2个span → 显示第2张图 */
.main:has(span:nth-child(2):hover) + .box .photo img:nth-child(2) {
  display: block;
}

/* 可依此类推添加更多规则... */

⚠️ 注意事项：

• :has() 不支持伪类链式嵌套（如 :has(span:hover:nth-child(1)) 无效），必须用 :nth-child(n) 明确索引；
• 若 <span></span> 不是 .main 的直接子元素（例如嵌套在 <p></p><div class="aritcle_card flexRow"> <div class="artcardd flexRow"> <a class="aritcle_card_img" href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板"><img src="https://img.php.cn/upload/webcode/000/000/018/178607072210981.jpg" alt="CSS婚礼策划服务机构宣传网站模板" ></a> <div class="aritcle_card_info flexColumn"> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板">CSS婚礼策划服务机构宣传网站模板</a> <p>CSS婚礼策划服务机构宣传网站模板是一款适合提供婚礼策划和婚庆服务机构宣传网站模板下载。提示：本模板调用到谷歌字体库，可能会出现页面打开比较缓慢。</p> </div> <a href="/xiazai/code/12093" title="CSS婚礼策划服务机构宣传网站模板" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a> </div> </div> 内），需调整选择器为 .main p:has(span:hover)；
• 为提升可维护性，建议为每个 <span></span> 添加语义化 data-id 属性（如 <span data-id="project-a"></span>），配合 JS 方案扩展（见下文备选方案）。

✅ 备选方案：轻量级 JavaScript（兼容性更强）

若需支持旧版浏览器或管理大量图片，推荐以下简洁 JS 实现：

立即学习“前端免费学习笔记（深入）”；

<!-- 在 .main 中为 span 添加 data-img 属性 -->
<span data-img="https://picsum.photos/id/1015/200/300">image 1</span>
<span data-img="https://picsum.photos/id/1016/200/300">image 2</span>

document.querySelectorAll('.main span').forEach(span => {
  span.addEventListener('mouseenter', () => {
    const imgUrl = span.dataset.img;
    document.querySelector('.box .photo img').src = imgUrl;
  });
});

✅ 总结

纯 CSS 方案简洁、无依赖，适合静态内容场景；JavaScript 方案灵活、可扩展性强，适合动态数据或复杂交互。无论选择哪种方式，核心在于建立文本触发源与图片目标之间的明确映射关系。从基础 :has() 入手，再逐步过渡到 JS 控制，是前端新手掌握 DOM 交互演进的典型路径。