转换开始和结束的持续时间不同？

.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）淡出。如何使它发生？

来源

2016-10-23 Arif

您需要设置非悬停状态的关闭持续时间以及悬停持续时间。

这是因为，一旦你悬停时，: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>

来源

2016-10-23 17:41:32

转换开始和结束的持续时间不同？

回答

相关问题