本文详解如何通过 css 相邻兄弟选择器（+）实现对“非父级”的后续同级 `` 元素进行悬停样式控制，无需 javascript，兼容性好，语义清晰。
在标准 CSS 中，无法直接通过 div:hover span 选择非子元素的 ——因为该写法仅匹配 div 的后代（包括子、孙等），而你的 HTML 结构中 是 假设你想在 hover 某个 对应 CSS 应改为： 若需 hover 一个 立即学习“前端免费学习笔记（深入）”； 但请注意：~ 会匹配所有后续同级 ，可能造成意外联动，务必结合实际 DOM 结构谨慎使用。 此方案零 JS、高兼容（支持 IE9+），是构建响应式交互组件的轻量级基石。✅ 正确思路：利用 + 选择紧邻的下一个同级元素
<section id="section1">
<div class="aboutusdiv" id="div1"></div>
<span></span>
<div class="aboutusdiv" id="div2"></div>
<span></span>
<!-- ...其余结构保持一致 -->
</section>
#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; /* 可选：视觉反馈更清晰 */
}⚠️ 注意事项：+ 只匹配紧邻的下一个兄弟元素，不跨元素（如 + p + span 不生效）；若 不紧跟在 后（中间有空格、换行或注释不影响，但若有其他标签则失效），需确保 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）。
✅ 进阶技巧：影响多个后续兄弟（可选）
#section1 .aboutusdiv:hover ~ span {
transform: translateX(60%);
width: 500px;
}✅ 总结
