本文详解如何通过 css 相邻兄弟选择器（+）实现对“非父级”的后续同级 `` 元素进行悬停样式控制，无需 javascript，兼容性好，语义清晰。
在标准 CSS 中，无法直接通过 div:hover span 选择非子元素的 <span>——因为该写法仅匹配 div 的后代（包括子、孙等），而你的 HTML 结构中 <span> 是 <div> 的后继同级兄弟元素，并非其后代。所幸，CSS 提供了强大的关系选择器，其中 +（相邻兄弟选择器）正是解决此类场景的理想方案。
✅ 正确思路：利用 + 选择紧邻的下一个同级元素
假设你想在 hover 某个 <div> 时，影响它后面紧挨着的那个 <span>（即结构上 <div> 后立即跟一个 <span>），可将 HTML 调整为交替排列，并用 + 精准定位：
<section id="section1"> <div class="aboutusdiv" id="div1"></div> <span></span> <div class="aboutusdiv" id="div2"></div> <span></span> <!-- ...其余结构保持一致 --> </section>
对应 CSS 应改为：
#section1 span {
display: inline-block; /* 确保 transform 和 width 生效 */
width: 300px;
height: 300px;
background-color: blue;
position: relative;
transition: all 0.5s ease-in-out 0.1s;
}
/* 当 hover 某个 div 时，作用于它「后面紧邻的」span */
#section1 .aboutusdiv:hover + span {
transform: translateX(60%); /* 推荐使用 translateX 而非 translate，更明确 */
width: 500px;
background-color: #4a90e2; /* 可选：视觉反馈更清晰 */
}⚠️ 注意事项：+ 只匹配紧邻的下一个兄弟元素，不跨元素（如 <div> + p + span 不生效）；若 <span> 不紧跟在 <div> 后（中间有空格、换行或注释不影响，但若有其他标签则失效），需确保 DOM 顺序严格符合 div + span；transform: translate(60%) 默认按 X/Y 方向等比位移，建议显式写为 translateX(60%) 或 translate(60%, 0) 避免歧义；float: right 在现代布局中不推荐用于定位，transform 或 margin-left/auto 配合 text-align 更可靠；若需真正右对齐容器，建议配合 display: flex 或 position: absolute（需父容器设 position: relative）。
✅ 进阶技巧：影响多个后续兄弟（可选）
若需 hover 一个 <div> 同时影响其后所有 <span>（非仅第一个），可改用通用兄弟选择器 ~：
立即学习“前端免费学习笔记（深入）”；
#section1 .aboutusdiv:hover ~ span {
transform: translateX(60%);
width: 500px;
}但请注意：~ 会匹配所有后续同级 <span>，可能造成意外联动，务必结合实际 DOM 结构谨慎使用。
✅ 总结
- ✅ 可行：纯 CSS 实现非父子元素的悬停联动；
- ✅ 关键选择器：+（相邻兄弟）或 ~（通用兄弟）；
- ✅ 前提条件：目标元素必须是触发元素的同级且位于其后；
- ❌ 不可行：div:hover span（后代选择器）无法匹配兄弟节点；
- ? 最佳实践：保持 HTML 结构语义清晰，优先使用 + 控制精准范围，辅以 transform 和 transition 实现流畅动画。
此方案零 JS、高兼容（支持 IE9+），是构建响应式交互组件的轻量级基石。
