div css 过渡只有一种方式，然后就忘了它

Question

所以我有这个 div，我想在悬停时平滑地缩放它。一切顺利，顺利做大。然而，当我将鼠标移开后，它会立即恢复到正常状态而没有平滑过渡。

.dashboardInfoBox {
    width: 190px;
    display: flex;
    height: 120px;
    background-color: red;
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
    padding: 11px 17px;
    flex-direction: column;
    justify-content: space-around;
}
.dashboardInfoBox:hover {
    transform: scale(1.5);
    transition: 0.2s linear;
}

<div class="dashboardInfoBox">
    test text
</div>

我不知道如何强制过渡双向进行......非常感谢任何建议！

Answer 1

你必须给父元素

dashboardInfoBox

过渡属性，这应该可以解决问题:)

Answer 2

与其让

transition

处于悬停状态 (

.dashboardInfoBox:hover

)，不如将其移至常规课程 (

.dashboardInfoBox

)。

发生的事情是，只有当您将鼠标悬停在元素上时，您的过渡才会起作用。

.dashboardInfoBox {
    width: 190px;
    display: flex;
    height: 120px;
    background-color: red;
    border-radius: 10px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 7%), 0 4px 6px -2px rgb(0 0 0 / 5%);
    padding: 11px 17px;
    flex-direction: column;
    justify-content: space-around;
    transition: 0.2s linear;
}

.dashboardInfoBox:hover {
    transform: scale(1.5);
}