本文讲解如何利用 css 选择器（特别是相邻兄弟选择器 `+`）在 hover 非父级元素时，精准控制后续同级 `` 的位置、尺寸与动画效果，无需 javascript 即可实现响应式交互。
在标准 CSS 中，无法通过后代选择器（如 div:hover span）选中非嵌套关系的元素——因为你的 HTML 结构中 <span> 并非 <div> 的子元素，而是同级兄弟节点。因此，原写法 #section1 div:hover span 永远不会生效。
但 CSS 提供了强大的兄弟选择器来解决这类场景：
- +：相邻兄弟选择器（只匹配紧接其后的下一个同级元素）
- ~：通用兄弟选择器（匹配其后所有符合条件的同级元素）
✅ 正确思路是：让 <div> hover 时，影响它「后面紧接着的那个 <span>」。这需要调整 HTML 结构，使 <span> 紧跟对应 <div>，例如：
<section id="section1"> <div class="aboutusdiv" id="div1"></div> <span class="tooltip">Info 1</span> <div class="aboutusdiv" id="div2"></div> <span class="tooltip">Info 2</span> <!-- 其余类推... --> </section>
然后使用相邻兄弟选择器实现悬停联动：
立即学习“前端免费学习笔记（深入）”；
#section1 .tooltip {
display: inline-block;
width: 300px;
height: 40px;
background-color: #4a90e2;
color: white;
text-align: center;
line-height: 40px;
position: relative;
transition: all 0.5s ease-in-out 0.1s;
opacity: 0;
transform: translateX(-10px);
pointer-events: none; /* 防止 span 干扰 hover */
}
#section1 .aboutusdiv:hover + .tooltip {
opacity: 1;
transform: translateX(20px); /* 向右平移，视觉上“对齐到右侧” */
width: 360px;
background-color: #2c5a9c;
}⚠️ 注意事项：
- + 选择器要求元素严格相邻且顺序固定；若中间插入其他标签（如注释、文本节点或其它元素），将失效；
- 若需一个 <div> 控制多个 <span>（如下方多个提示框），应改用 ~ 选择器，但需确保语义合理；
- position: relative 在 <span> 上有效，但若需脱离文档流定位（如绝对居右），建议包裹一层 position: relative 的容器，内部 <span> 设 position: absolute; right: 0;；
- 动画触发依赖 transition 属性，务必为需变化的 CSS 属性（如 transform、width、opacity）显式声明，避免仅写 all 导致性能隐患。
? 总结：纯 CSS 实现跨元素悬停响应的关键在于结构先行、选择器精准、过渡可控。只要合理组织 DOM 顺序并善用 + 或 ~，就能优雅替代 JS 逻辑，提升页面性能与可维护性。
