本文介绍一种纯 CSS 方案：利用现代浏览器支持的 :has() 伪类，实现在左侧文本区域悬停特定文字时，动态切换右侧独立容器中的对应图片，无需 JavaScript 即可完成跨元素交互。
本文介绍一种纯 css 方案：利用现代浏览器支持的 `:has()` 伪类，实现在左侧文本区域悬停特定文字时，动态切换右侧独立容器中的对应图片，无需 javascript 即可完成跨元素交互。
要实现“悬停左侧文字 → 切换右侧图片”这一效果，关键在于突破传统 CSS 选择器无法向上或跨兄弟节点定位的限制。CSS :has() 正是为此而生——它允许我们基于后代/兄弟元素的状态（如 :hover）来选中父级或前置兄弟元素，从而驱动样式变化。
✅ 基础原理：:has() + 相邻兄弟选择器 +
在你的 HTML 结构中，.main 和 .box 是同级兄弟容器。我们可以这样构建逻辑链：
当 .main 元素内某个 <span></span> 被悬停时，利用 .main:has(span:nth-child(1):hover) 匹配该状态；再通过 +.box 向后选择紧邻的 .box，最终定位到 .photo img:nth-child(1) 并设为 display: block，同时其他图片保持 display: none。
? 完整可运行示例
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>悬停切换跨容器图片</title>
<style>
.main {
width: 40%;
margin-left: 2%;
margin-top: 5%;
float: left;
font-family: "calluna-sans", sans-serif;
font-weight: 300;
color: #333;
line-height: 1.6;
font-size: 1.4em;
}
.box {
margin-left: 50%;
background-color: #000;
height: 300px;
width: 40%;
display: flex;
align-items: center;
justify-content: center;
vertical-align: middle;
}
.photo {
position: relative;
width: 200px;
height: 300px;
overflow: hidden;
}
.photo img {
display: none;
width: 100%;
height: 100%;
object-fit: cover;
transition: opacity 0.3s ease;
}
/* 默认显示第一张图 */
.main:has(span:first-child:hover) + .box .photo img:first-child,
.main:has(span:nth-child(2):hover) + .box .photo img:nth-child(2),
.main:has(span:nth-child(3):hover) + .box .photo img:nth-child(3) {
display: block;
opacity: 1;
}
/* 初始状态：仅第一张图可见 */
.photo img:first-child {
display: block;
}
/* 可选：悬停文字高亮反馈 */
.main span {
cursor: pointer;
position: relative;
}
.main span:hover {
color: #e74c3c;
text-decoration: underline;
}
</style>
</head>
<body>
<div class="main">
这是我的作品集：<span>项目 A</span>、<span>项目 B</span> 和 <span>项目 C</span>。
</div>
<div class="box">
<div class="photo">
<!-- 按顺序一一对应 -->
<img src="https://picsum.photos/id/1015/200/300" alt="项目 A 预览">
<img src="https://picsum.photos/id/1016/200/300" alt="项目 B 预览">
<img src="https://picsum.photos/id/1017/200/300" alt="项目 C 预览">
</div>
</div>
</body>
</html>⚠️ 注意事项与局限性
-
浏览器兼容性：
:has()已被 Chrome 105+、Edge 105+、Firefox 121+ 和 Safari 15.4+ 原生支持，但旧版浏览器（如 IE 或早期 Chrome）不支持。生产环境建议添加渐进增强或 JS 回退方案。 -
性能提示：避免对大量
span重复书写:has(...)+.box img:nth-child(N)规则。若超过 5–6 项，推荐改用 JavaScript 动态切换src或background-image，更易维护。 -
语义优化：每个
<span></span>应包裹有意义的触发词（如项目名），并添加aria-label提升可访问性，例如<span aria-label="展示项目A截图">项目 A</span>。 -
默认图策略：示例中设首张图为默认可见图；你也可通过
.photo img:first-child { display: block; }显式声明，确保页面加载即见内容。
? 进阶建议（JS 轻量替代方案）
若需更好兼容性或更灵活控制（如预加载、淡入动画、懒加载），可用以下简洁 JS：
document.querySelectorAll('.main span').forEach((span, i) => {
const imgs = document.querySelectorAll('.photo img');
span.addEventListener('mouseenter', () => {
imgs.forEach((img, j) => img.style.display = j === i ? 'block' : 'none');
});
});将此脚本置于
