.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以不同的速度(比如1s(淡出。如何实现？
您需要设置非悬停状态的关闭持续时间，以及悬停状态的开启持续时间。
这是因为一旦悬停，: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>