我有一个CSS Grid容器以及其中的侧边栏和内容区域。我想在用户关闭侧边栏（内容区域）时水平扩展以填充容器的整个宽度。我在下面的示例中将鼠标悬停在侧边栏上使用了transformX（-100％），并在下面的示例中使用了transformX（0％）将鼠标上的侧边栏显示出来：
.test-container {
display: grid;
background-color: aquamarine;
grid-template-columns: 1fr 2fr;
grid-template-areas: "sidebar content";
height: 100vh;
}
.test-sidebar {
background-color: blue;
grid-area: sidebar;
transform: translateX(0%);
font-size: 40px;
color: white;
text-align: center;
transition: 2000ms;
}
.test-sidebar:hover {
transform: translateX(-100%);
transition: 2000ms;
}
.test-content {
background-color: blueviolet;
font-size: 40px;
text-align: center;
grid-area: content;
color: white;
}<div class="test-container">
<div class="test-sidebar">Sidebar</div>
<div class="test-content">Content</div>
</div>这是一个悬停在所有网格元素上的解决方案，仅用于演示如何处理两个不同的单元。这里我们有grid-template-columns: auto 1fr;in.test-container和的静态宽度in .test-sidebar。现在他们正在按您的意愿进行扩展/合拢。
关于其他行为，“当用户关闭边栏时”是什么意思？描述此行动请求。描述一下侧边栏的行为，在这种情况下应折叠并展开？我认为，整个解决方案都需要JS。如果需要，我会在您的描述后添加它。
.test-container {
display: grid;
background-color: aquamarine;
grid-template-columns: auto 1fr;
height: 100vh;
transition: all 2s ease;
}
.test-sidebar {
background-color: blue;
font-size: 40px;
color: white;
text-align: center;
overflow: hidden;
width: 200px;
transition: all 2s ease;
}
.test-container:hover .test-sidebar {
width: 0;
}
.test-content {
background-color: blueviolet;
font-size: 40px;
text-align: center;
color: white;
}<div class="test-container">
<div class="test-sidebar">Sidebar</div>
<div class="test-content">Content</div>
</div>本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句