悬停侧边栏处于活动状态时如何移动我的主要内容？

Question

:root {
  font-size: 16px;
  --text-primary: #b6b6b6;
  --text-secondary: #ececec;
  --bg-primary: #23232e;
  --bg-secondary: #141418;
  --transition-speed: 600ms;
}

body {
  overflow-x: hidden;
  color: black;
  background-color: rgb(81, 146, 225);
  margin: 0;
  padding: 0;
}

body::-webkit-scrollbar {
  width: 0.5rem;
}

body::-webkit-scrollbar-track {
  background: #00ff8c;
}

body::-webkit-scrollbar-thumb {
  background: #ff0000;
}

.main {
  top: 0;
  margin-left: 5rem;
  margin-top: 5rem;
  padding: 1rem;
}

.topbar {
  display: block;
  position: fixed;
  z-index: 3;
  background-color: var(--bg-primary);
}

.navbar {
  display: block;
  position: fixed;
  z-index: 3;
  background-color: var(--bg-primary);
  transition: 200ms ease;
}


/*small screen*/

@media only screen and (max-width:600px) {
  .navbar {
    bottom: 0;
    width: 100vw;
    height: 5rem;
  }
  .topbar {
    top: 0;
    width: 100%;
    height: 5rem;
  }
  .main {
    margin-top: 5rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5rem;
  }
}


/*mid size screens*/

@media only screen and (min-width:600px) {
  .navbar {
    top: 0;
    width: 5rem;
    height: 100vh;
  }
  .topbar {
    top: 0;
    width: 100%;
    height: 5rem;
  }
  .navbar:hover {
    width: 16rem;
  }
}


/*large screens todo*/

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <nav class="topbar" style="padding-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;">
    <!--i would have my menu in here....-->
  </nav>

  <nav class="navbar" style="padding-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;">
    <!--i would have my menu in here....-->
  </nav>

  <div id="content" name="main_content" class="main">
    <h1>Demo</h1>
    <hr>
    <h3>This is just a demo page.
      <h3>
  </div>

</body>

因此，当您运行代码段并将鼠标向左移动时，我的侧边栏会从左侧弹出，我的问题是如何让我的主要内容移动当侧边栏从左侧弹出时向右一点 ?

我正在尝试以这样一种方式移动主要内容，即当侧边栏不在时，它仍然可见，一旦侧边栏不活动，它就会回到默认位置...

在我的 css 中，我已将 margin-left: 5rem; 定义为主 class

的默认值

到目前为止，我已经尝试对我的 css:

做这样的事情

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

我想如果我以这种方式更改我的 css，当悬停处于活动状态时，这会将我的主要内容边距设置为 16rem，但它似乎不会那样工作...

Answer 1

根据您的元素结构，.main 是 .navbar 的同级元素，因此您应该使用 ~ 更改同级元素的样式（您可以查看 this document )

/*Animation*/
.main {
  transition: all 200ms ease;
}

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

:root {
  font-size: 16px;
  --text-primary: #b6b6b6;
  --text-secondary: #ececec;
  --bg-primary: #23232e;
  --bg-secondary: #141418;
  --transition-speed: 600ms;
}

body {
  overflow-x: hidden;
  color: black;
  background-color: rgb(81, 146, 225);
  margin: 0;
  padding: 0;
}

body::-webkit-scrollbar {
  width: 0.5rem;
}

body::-webkit-scrollbar-track {
  background: #00ff8c;
}

body::-webkit-scrollbar-thumb {
  background: #ff0000;
}

.main {
  top: 0;
  margin-left: 5rem;
  margin-top: 5rem;
  padding: 1rem;
  transition: all 200ms ease;
}

.topbar {
  display: block;
  position: fixed;
  z-index: 3;
  background-color: var(--bg-primary);
}

.navbar {
  display: block;
  position: fixed;
  z-index: 3;
  background-color: var(--bg-primary);
  transition: 200ms ease;
}

/*small screen*/

@media only screen and (max-width:600px) {
  .navbar {
    bottom: 0;
    width: 100vw;
    height: 5rem;
  }

  .topbar {
    top: 0;
    width: 100%;
    height: 5rem;
  }

  .main {
    margin-top: 5rem;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 5rem;
  }
}


/*mid size screens*/

@media only screen and (min-width:600px) {
  .navbar {
    top: 0;
    width: 5rem;
    height: 100vh;
  }

  .topbar {
    top: 0;
    width: 100%;
    height: 5rem;
  }

  .navbar:hover {
    width: 16rem;
  }
  
  /*Add ~ for sibling element #content*/
  .navbar:hover ~ .main {
    margin-left: 16rem;
  }
}

<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link rel="stylesheet" href="style.css" />
</head>

<body>
  <nav class="topbar" style="padding-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;">
    <!--i would have my menu in here....-->
  </nav>

  <nav class="navbar" style="padding-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 0px;">
    <!--i would have my menu in here....-->
  </nav>

  <div id="content" name="main_content" class="main">
    <h1>Demo</h1>
    <hr>
    <h3>This is just a demo page.
    </h3>
  </div>

</body>

悬停侧边栏处于活动状态时如何移动我的主要内容？

How to move my main content when hover sidebar is active?

html

css