本文介绍如何在不改变 html 结构的前提下，利用 css 选择器（如相邻兄弟选择器 `+` 或通用兄弟选择器 `~`）实现“悬停某个 div 时动态控制其后方非父级 span 的位置与样式”，并指出原代码中选择器逻辑错误及正确替代方案。
在 CSS 中，无法通过后代选择器（如 div:hover span）选中非嵌套关系的元素——这是关键前提。你原始代码中 #section1 div:hover span 的写法隐含了“span 是 div 的后代”的假设，但你的 HTML 结构中 span 与 div 是同级兄弟节点，并非父子关系，因此该规则完全不会生效。
要实现“悬停某个 div 时影响其后的 span”，必须借助兄弟选择器：
- +：相邻兄弟选择器（仅匹配紧邻其后的下一个同级元素）
- ~：通用兄弟选择器（匹配其后所有符合条件的同级元素）
✅ 正确做法示例（基于你的真实结构）：
<section id="section1"> <div class="aboutusdiv" id="div1"></div> <span>Span 1</span> <div class="aboutusdiv" id="div2"></div> <span>Span 2</span> <div class="aboutusdiv" id="div3"></div> <span>Span 3</span> <!-- 其余结构类推 --> </section>
#section1 span {
display: inline-block;
width: 300px;
height: 300px;
background-color: #4a90e2;
color: white;
text-align: center;
line-height: 300px;
font-weight: bold;
position: relative;
transition: all 0.5s ease-in-out 0.1s;
}
/* 悬停 div1 → 影响紧随其后的第一个 span（即 Span 1） */
#section1 #div1:hover + span {
transform: translateX(60%);
width: 500px;
}
/* 悬停 div2 → 影响紧随其后的 span（即 Span 2） */
#section1 #div2:hover + span {
transform: translateX(60%);
width: 500px;
}
/* 以此类推，或使用更简洁的类名方式统一处理 */
.aboutusdiv:hover + span {
transform: translateX(60%);
width: 500px;
background-color: #ff6b6b;
}⚠️ 注意事项：
立即学习“前端免费学习笔记（深入）”；
- + 选择器要求目标元素必须紧跟在触发元素之后，中间不能有其他标签（如注释、文本节点或其它元素），否则失效；
- 若需“悬停任意 div 时统一影响所有 span”，应改用 JavaScript 动态添加类，CSS 本身无法跨兄弟反向选择（例如无法用纯 CSS 实现“hover div3 时修改前面的 span”）；
- float: right 在现代布局中已不推荐用于定位，优先使用 transform、margin-left/auto 或 Flex/Grid 容器控制对齐；
- 确保 span 设置 display: inline-block 或 block，否则 width/height 和 transform 可能不生效。
? 总结：纯 CSS 实现“非父级悬停联动”的核心是合理利用兄弟选择器 + 或 ~，并严格遵循 DOM 顺序。若交互逻辑复杂（如需跨多个层级、反向控制或条件判断），建议结合轻量级 JavaScript 增强可维护性与灵活性。
