将鼠标悬停在 class 上并修改另一个 class

Question

我有一个网格布局，里面是一个宽度为 (64px) 的侧边栏，网格：

.container {
  display: grid;
  height: 100vh;
  width: 100vw;
  grid-template-areas:
    "sidebar header"
    "sidebar content"
    "footer footer";
  grid-template-columns: 64px auto;
  grid-template-rows: 5% 92% auto;
  background-color: #efeff1;
}

当我将鼠标悬停在 class 侧边栏上时，我如何才能将其更改为 (160px)，

.边栏：

.sidebar {
  grid-area: sidebar;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: #1f2937;
  color: rgba(156, 163, 175);
  border-radius: 0.2rem 0.2rem 0 0;
}

Answer 1

其他评论者是正确的，您无法将 parent 更改为 child。但是你可以让parent适配child，只需要修改child的宽度即可。

  grid-template-columns: auto auto;

根据您的代码在此处摘录：https://codepen.io/29b6/pen/wvypzGq

将鼠标悬停在 class 上并修改另一个 class

Hover over class and modify another class

html

css