本文讲解如何利用 css 选择器（特别是相邻兄弟选择器 `+`）在 hover 非父级元素时，精准控制后续同级 `` 的位置、尺寸与动画效果，无需 javascript 即可实现响应式交互。
在标准 CSS 中，无法通过后代选择器（如 div:hover span）选中非嵌套关系的元素——因为你的 HTML 结构中 并非 但 CSS 提供了强大的兄弟选择器来解决这类场景： ✅ 正确思路是：让 然后使用相邻兄弟选择器实现悬停联动： 立即学习“前端免费学习笔记（深入）”； ⚠️ 注意事项： ? 总结：纯 CSS 实现跨元素悬停响应的关键在于结构先行、选择器精准、过渡可控。只要合理组织 DOM 顺序并善用 + 或 ~，就能优雅替代 JS 逻辑，提升页面性能与可维护性。
<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;
}
