我需要子元素在悬停时的行为，因为红色边框（子元素）应该与蓝色边框（父元素）在同一条线上，从顶部，左侧，底部和右侧。 我可以用填充物来做吗？ 有几个框的结构相同，但宽度和高度不同，文字的长度也不同（有的在两行或三行）。
如果不能通过填充来实现，我如何通过其他方法来达到同样的效果呢？
密码在这里
null
* {
box-sizing: border-box;
}
.out {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
width: 200px;
height: 200px;
margin: 2rem auto;
border: 1px solid blue;
}
.out .in {
font-size: 20px;
line-height: 1;
display: inline-block;
text-align: center;
border: 1px solid red;
padding: 20px;
margin: auto;
transition: padding .7s;
}
.out:hover .in {
padding-top: 90px;
padding-bottom: 90px;
padding-left: 40px;
padding-right: 40px;
background: rgba(0,0,0,.2);
}<div class="out">
<p class="in">
Hello Friend
</p>
</div>
<div class="out">
<p class="in">
Hello Friend
</p>
</div>
<div class="out">
<p class="in">
Hello Friend this is a new text
</p>
</div>
<div class="out">
<p class="in">
Hello
</p>
</div>null
谢谢
如果可以添加额外包装器，则可以通过嵌套flexbox容器和动画flex-grow来实现
null
* {
box-sizing: border-box;
}
.out {
display: flex;
flex-direction: column;
width: 200px;
height: 200px;
margin: 2rem auto;
justify-content: center;
border: 1px solid blue;
}
.out > div {
display: flex;
justify-content: center;
}
.out .in {
display: flex;
font-size: 20px;
justify-content: center;
align-items: center;
text-align: center;
border: 1px solid red;
padding: 20px;
margin: 0;
}
.out * {
flex-grow: 0;
transition: flex-grow .5s;
}
.out:hover * {
flex-grow: 1;
}
.out:hover .in {
background: rgba(0, 0, 0, .2);
}<div class="out">
<div>
<p class="in">
Hello Friend
</p>
</div>
</div>
<div class="out" style="width:auto">
<div>
<p class="in">
Hello Friend
</p>
</div>
</div>
<div class="out" style="height:auto;min-height:300px;">
<div>
<p class="in">
Hello Friend this is a new text
</p>
</div>
</div>
<div class="out">
<div>
<p class="in">
Hello
</p>
</div>
</div>
您可以在父级悬停时100%添加子级的高度和宽度。
null
* {
box-sizing: border-box;
}
.out {
display: -webkit-box;
display: flex;
-webkit-box-pack: center;
justify-content: center;
width: 200px;
height: 200px;
margin: 2rem auto;
border: 1px solid blue;
}
.out .in {
font-size: 20px;
line-height: 1;
display: inline-block;
text-align: center;
border: 1px solid red;
padding: 20px;
margin: auto;
transition: padding .7s;
}
.out:hover .in {
padding-top: 90px;
padding-bottom: 90px;
padding-left: 40px;
padding-right: 40px;
background: rgba(0,0,0,.2);
width: 100%;
height: 100%;
}<div class="out">
<p class="in">
Hello Friend
</p>
</div>
<div class="out">
<p class="in">
Hello Friend
</p>
</div>
<div class="out">
<p class="in">
Hello Friend this is a new text
</p>
</div>
<div class="out">
<p class="in">
Hello
</p>
</div>
如果你只需要背景动画和-你可以使用像这样的东西。 在这里，元素::after与text分开缩放。
null
* {
box-sizing: border-box;
}
.out {
display: -webkit-box;
display: inline-flex;
vertical-align: top;
-webkit-box-pack: center;
justify-content: center;
width: 200px;
height: 200px;
margin: 2rem auto;
border: 1px solid blue;
overflow: hidden; /* to hide parent exapnded background */
}
.out .in {
font-size: 20px;
line-height: 1;
display: inline-block;
text-align: center;
padding: 20px;
margin: auto;
position: relative;
}
.out .in::after {
content: '';
background: rgba(0,0,0,.2);
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
transform: scale(1);
transition: all .7s;
}
.out:hover .in::after {
transform: scale(5);
}<div class="out">
<p class="in">
Hello Friend
</p>
</div>
<div class="out">
<p class="in">
Hello Friend this is a new text
</p>
</div>
<div class="out">
<p class="in">
Hello
</p>
</div>