悬停时更改网格列（侧边栏）

Question

我正在尝试更改悬停在父网格布局内的边栏的宽度这样侧边栏宽度现在是 64px 但是当悬停时变成 120px

.container{
  display:grid;
  height: 100vh;
  width: 100vw;
  grid-template-areas: "sidebar content";
  grid-template-columns: 64px auto;
}
.sidebar{
  grid-area:sidebar;
  background-color: black;
}
.content{
  grid-area:content;
  background-color:red;
}
/* this part */
.sidebar:hover{
  grid-column:120px;
}

<div class="container">
<div class= "sidebar">

</div>
<div class="content">

</div>
</div>

Answer 1

对我来说，在这种情况下使用 flexbox 似乎是合乎逻辑的，因为当悬停子项（边栏）时您无法定位父项。

body {
 margin:0;
}
.container {
  height: 100vh;
  width: 100vw;
  display: flex;
}
.sidebar {
  background-color: black;
  width: 64px;
  transition: 0.3s ease;
}
.content {
  background-color: red;
  flex-grow: 1;
}
/* this part */
.sidebar:hover {
  width: 120px;
}

<div class="container">
  <div class="sidebar">
  </div>
  <div class="content">
  </div>
</div>

悬停时更改网格列（侧边栏）

Change grid-column (sidebar) on hover

html

css