本文介绍如何利用 css 选择器（如 `+` 相邻兄弟选择器）在不改变 html 结构的前提下，实现“悬停一个元素时动态影响其后紧邻的另一个非父级元素”的效果，适用于导航提示、状态反馈等场景。
在标准 CSS 中，无法直接通过 div:hover span 选择器控制非后代关系的 元素——因为你的原始代码中 并非 ✅ 正确解法是使用 相邻兄弟选择器 +：它能精准定位“紧跟在某个元素之后的同级兄弟元素”。 例如，若希望悬停 对应 CSS 应修正为： 立即学习“前端免费学习笔记（深入）”； ⚠️ 注意事项： ? 小结：CSS 原生不支持“反向选择”（如从子元素影响前序兄弟），但借助 + 和 ~ 等兄弟选择器，配合合理的 HTML 顺序，完全可实现跨元素的悬停联动效果——无需 JavaScript，轻量、高效、语义清晰。#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;
}
/* 悬停某 div 时，影响它「后面紧邻」的 span */
#section1 .aboutusdiv:hover + span {
transform: translateX(60%); /* 推荐使用 translateX 而非 translate，语义更明确 */
width: 500px;
background-color: #4a90e2; /* 可选：视觉反馈增强 */
}
