css hover延时 解决快速划入划出

加上一个动画的延迟,当你快速的hover的时候,上一个动画还没有开始,就被下一个覆盖掉了。

<style>
button {
    padding: 10px;
    border: 2px solid #f7f7f7;
    text-align: center;
    transition: 0.3s;
 background:#f50;
}
button:hover {
    color: #fff;
}


 button {   
        transition:  0.3s 0.1s;
     }
</style>
<button>hover</button>

设置的延迟是0.1s,面对快速的抖动只有最后鼠标停下来

原文地址:https://www.cnblogs.com/7c89/p/15490783.html