鼠标hover时transiton的问题

文章目录

1. 1. 问题一: transition设置在hover中，移入时有过渡动画；但是移出后，立即回到原来的样式，没有过渡动画效果。
2. 2. 问题二: transition设置在元素中，移入时有过渡动画；移出后，也有过渡动画回到原来的样式。

问题一: transition设置在hover中，移入时有过渡动画；但是移出后，立即回到原来的样式，没有过渡动画效果。

css代码:

.box{
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background-color: red;
}
.box:hover{
    border-radius: 50%;
    transition: all 1s;
}

html代码:

<div class="box"></div>

问题二: transition设置在元素中，移入时有过渡动画；移出后，也有过渡动画回到原来的样式。

css代码:

.box{
    width: 100px;
    height: 100px;
    margin: 100px auto;
    background-color: red;
    transition: all 1s;
}
.box:hover{
    border-radius: 50%;
}

写的不好的地方,望大家多多指正,小弟感激不尽!