CSS实现侧边栏hover展开时主内容同步右移

你写的.navbar:hover .main是后代选择器，仅能匹配嵌套在.navbar元素内部的.main节点。但从现有HTML结构看，.navbar和.main是平级的兄弟元素，不存在嵌套关系，这条规则根本选不中目标，当然不会生效。

不用写JS，用CSS原生的相邻兄弟选择器就能实现联动偏移，配合过渡属性还能做平滑动画。

修改步骤 #

• 给.main加过渡属性，动画时长和侧边栏展开的200ms保持一致，避免内容跳变
• 把之前无效的后代选择器换成相邻兄弟选择器，匹配hover状态下侧边栏后面的主内容节点
• 宽度600px以下的小屏场景里，侧边栏是固定在底部的，不需要内容右偏，所以把偏移规则放在中屏及以上的媒体查询里，别打乱小屏布局。

核心代码修改 #

首先调整.main的基础样式，新增过渡：

.main {
  top: 0;
  margin-left: 5rem;
  margin-top: 5rem;
  padding: 1rem;
  /* 新增：和侧边栏展开动画速度对齐 */
  transition: margin-left 200ms ease;
}

然后在中屏媒体查询块（@media only screen and (min-width:600px)）里新增如下规则：

.navbar:hover + .main {
  margin-left: 16rem;
}

改完之后，鼠标移到左侧唤起侧边栏时，主内容会跟着平滑右移，不会被展开的侧边栏挡住；鼠标移开侧边栏收起，主内容也会自动回到默认位置。

小提示：如果后续改DOM结构，在.navbar和.main之间插了其他同级元素，把选择器里的+换成通用兄弟选择器~就行，写成.navbar:hover ~ .main，依然可以命中目标。

内容的提问来源于stack exchange，提问作者Saravanan Ramanathan