![CSS网格]( "CSS网格")
本文介绍了使用CSS网格获得堆叠的div以贴近底部的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
在下面的布局中，当我将鼠标悬停在上时，我试图使内容在整个框中保持底部对齐，以便单词和副标题保持在它们所在的位置，而显示的<ul>仅位于其顶部。我正在尽我所能地处理CSS网格--但我不知所措。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">.programbox {
display: grid;
grid-template-areas: 'item';
align-content: end;
justify-content: stretch;
height: 300px;
width: 700px;
background-image: url(https://heroshockey.com/wp2021/wp-content/uploads/2021/07/program-billboards-future-stars.jpg);
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
}
.programbox::before {
content: '';
grid-area: item;
background-color: red;
mix-blend-mode: multiply;
}
.content {
grid-area: item;
isolation: isolate;
color: white;
align-self: end;
}
.details {
display: none;
}
h1,
p {
margin: 0;
padding: 10px;
}
.programbox:hover .content {
height: 300px;
}
.programbox:hover .details {
display: inherit;
}
<div class="programbox">
<div class="content">
<div class="details">
<ul>
<li>Grades 4 – 8, participants referred by partner schools or social services agencies</li>
<li>Weekly on-ice practices</li>
<li>Learn on-ice skills, confidence building, equipment care</li>
<li>Intro to mentoring relationships with volunteers & HEROS All Stars</li>
</ul>
</div>
<h1 class="header">HEADLINE</h1>
<div class="description">
<p>Subhead</p>
</div>
</div>
</div>
(我确实希望.content框在鼠标悬停时达到容器的完全高度，从而将整个图像变为红色。)
此外...无论我将该规则放在哪个元素上，都无法使"transition: 1s;"的悬停过渡变得更慢。
感谢您的帮助或建议！
推荐答案
我尝试了您的代码片段，并进行了重构。删除了不必要的html标记并更改了一些样式选项。
数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
.programbox {
height: 300px;
width: 700px;
background-image: url(https://heroshockey.com/wp2021/wp-content/uploads/2021/07/program-billboards-future-stars.jpg);
background-size: cover;
background-position: 50%;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
.programbox::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: red;
mix-blend-mode: multiply;
transition: all 1s ease-in-out;
transform: translateY(73%);
}
.programbox:hover::before {
transform: translateY(0%);
}
.content {
height: 100%;
display: grid;
grid-template-rows: 1fr repeat(2, 35px);
overflow: hidden;
isolation: isolate;
color: white;
}
h1,
p,
li {
line-height: 1;
}
.header {
grid-row: 2;
}
.description {
grid-row: 3;
}
.details {
grid-row: 1;
}
.header,
.description {
margin: 0;
padding: 0 10px;
align-self: flex-start;
}
.details {
transform: translateY(100px);
opacity: 0;
user-select: none;
transition: all 0.5s ease-in-out;
}
.programbox:hover .details {
transform: translateY(0);
opacity: 1;
user-select: auto;
transition: all 1.5s ease-in-out;
}
<div class="programbox">
<div class="content">
<h1 class="header">HEADLINE</h1>
<p class="description">Subhead</p>
<ul class="details">
<li>
Grades 4 – 8, participants referred by partner schools or social
services agencies
</li>
<li>Weekly on-ice practices</li>
<li>Learn on-ice skills, confidence building, equipment care</li>
<li>
Intro to mentoring relationships with volunteers HEROS All Stars
</li>
</ul>
</div>
</div>