hover导航图标时侧边导航栏滑出但主页面内容未右移问题求助

问题根因 #

你的代码不生效有三个核心问题：

• 选择器写错：你写的.container:hover .body是选中container后代中类为body的元素，而你要匹配的是<body>标签，不需要加.前缀
• CSS不支持父元素选择：container是body的后代元素，CSS规则里无法通过后代元素的hover状态反向选中父级的body，所以你写的这条规则完全不会触发
• 定位属性缺失：默认body是static定位，left属性对非相对/绝对/固定定位的元素不生效

可行修改方案 #

1. 调整HTML结构

把所有主页面内容放到统一的容器里，不要直接修改body的偏移，避免布局异常：

<!DOCTYPE html>
<html>
<head>
    <link href="main_page.css" rel="stylesheet">
    <title>Cal's Blog</title>
</head>
<body>
    <nav>
        <div class="sideNav" id="sideNav">
            <div class="container">
                <div class="bar1"></div>
                <div class="bar2"></div>
                <div class="bar3"></div>
                <div class="navMenu">
                    <a href="#">about</a>
                    <a href="#">services</a>
                    <a href="#">clients</a>
                    <a href="#">contacts</a>
                </div>
            </div>
        </div>
    </nav>
    <!-- 新增主内容包裹容器 -->
    <div class="main-content">
        <h1> Cal's Blog</h1>
        <!-- 其他页面内容都放到这个容器里 -->
    </div>
</body>
</html>

2. 调整CSS规则

新增主内容容器的样式，用同级兄弟选择器触发偏移：

/* 新增全局和主内容样式 */
body {
  position: relative;
  overflow-x: hidden;
  margin: 0;
}
nav {
  display: inline-block; /* 限制nav宽度只有汉堡图标大小，避免空白区域误触发 */
}
.main-content {
  position: relative;
  left: 0;
  transition: left 0.5s ease;
  padding: 20px;
}

.container {
display: inline-block;
cursor: pointer; /* 加鼠标手势优化体验 */
}

.bar1, .bar2, .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
position: relative;
z-index: 2; /* 让汉堡图标显示在侧边栏上方 */
}

.container:hover .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);

}

.container:hover .bar2 {
opacity: 0;
}

.container:hover .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}
.navMenu {
height: 100%;
width: 250px; 
position: absolute; 
z-index: 1; 
top: 0; 
left: -250px;
background-color: #111; 
overflow-x: hidden; 
padding-top: 60px; 
transition: 0.5s;
}
.navMenu a{
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.navMenu a:hover{
color: #f1f1f1;
}
/* 调整侧边栏触发规则 */
nav:hover .navMenu {
left: 0;
}
/* 新增主内容偏移规则，用兄弟选择器匹配nav后面的主内容容器 */
nav:hover ~ .main-content {
left: 250px;
}

内容的提问来源于stack exchange，提问作者Nathan Pereira