Ari*_*rif 3 css css-transitions css-animations
.box {
width: 100px;
height: 100px;
background: blue;
}
.circle {
margin-top: 20px;
width: 80px;
height: 80px;
border-radius: 100%;
background: red;
opacity: 0;
transition: opacity 0.5s ease;
}
.box:hover + .circle {
opacity: 1;
}
<body>
<div class="box">
</div>
<div class="circle">
</div>
</body>在这里，当我将鼠标悬停在 上时.box，.circle会在 0.5 秒内淡入。
现在，当我将光标从 移开时.box，我想.circle以不同的速度（例如 1 秒）淡出。如何实现？
您需要设置非悬停状态下的关闭时长和悬停时的开启时长。
这是因为一旦您悬停，:hover属性就会优先（假设您的选择器已正确指定），因此悬停的持续时间将适用。将鼠标悬停后，将应用在普通元素上设置的属性。
.box {
width: 100px;
height: 100px;
background: blue;
}
.circle {
margin-top: 20px;
width: 80px;
height: 80px;
border-radius: 100%;
background: red;
opacity: 0;
transition: opacity 2s ease;
}
.box:hover + .circle {
opacity: 1;
transition-duration:0.5s
}<div class="box"></div>
<div class="circle"></div>