我解开潜水器时出了问题

Question

我正试图在悬停时更改文本，这很有效，但我想知道为什么当你解开div时文本会向右移动。

我想在你解开潜水器的时候产生同样的效果。是因为位置绝对吗？我对网络开发还很陌生。

.article-title {
opacity: 1;
width: 24%;
position: absolute;
padding-bottom: 10px;
color: #ff0099;
font-size: 30px;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.article-desc {
width: 23%;
position: absolute;
opacity: 0;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.box-link {
display: flex;
flex-direction: column;
padding: 10px;
border: 2px solid black;
border-radius: 10px;
height: 200px;
width: 25%;
text-align: center;
cursor: pointer;
transition: transform .5s, box-shadow .2s;
}
.box-link:hover {
transform: scale(1.15);
box-shadow: 0 0 51px rgba(33, 33, 33, .4);
}
.box-link:hover .article-title {
width: 89%;
position: absolute;
opacity: 0;
}
.box-link:hover .article-desc {
width: 95%;
opacity: 1;
}

<div class="box-link article-1">
<a class="article-title">The ultimate guide to Australian native flowers</a>
<a class="article-desc">Looking to add a touch of Australiana when building a bouquet or growing your garden? There are so many stunning Australian native flowers to choose from.</a>
</div>

Answer 1

将CSS更改为：

.article-title {
opacity: 1;
position: absolute;
padding-bottom: 10px;
color: #ff0099;
font-size: 30px;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.article-desc {
position: absolute;
opacity: 0;
transition: all .5s ease-in-out, width 0s linear, absolute 0s linear;
}
.box-link {
display: flex;
flex-direction: column;
padding: 10px;
border: 2px solid black;
border-radius: 10px;
height: 200px;
width: 25%;
text-align: center;
cursor: pointer;
transition: transform .5s, box-shadow .2s;
position: relative;
}
.box-link:hover {
transform: scale(1.15);
box-shadow: 0 0 51px rgba(33, 33, 33, .4);
}
.box-link:hover .article-title {
position: absolute;
opacity: 0;
}
.box-link:hover .article-desc {
opacity: 1;
}

<div class="box-link article-1">
<a class="article-title">The ultimate guide to Australian native flowers</a>
<a class="article-desc">Looking to add a touch of Australiana when building a bouquet or growing your garden? There are so
many stunning Australian native flowers to choose from.</a>
</div>

其想法是使父位置相对，这样就不再需要显式地使用宽度来容器化子位置。