防止鼠标上的CSS悬停转换

我使用CSS创建了一个按钮，在鼠标上方背景颜色会变浅，在鼠标向下时会立即变暗。问题是我想在mouseup上保持按钮的悬停状态，而不重复其转换。如何做到这一点

.btn1{
背景色：#08f；
边界顶部：0；
右边界：0；
边框底部：3px实心#048；
左边框：0；
边界半径：20px；
颜色：#fff；
字号：16pt；
填充：10px 20px；
过渡：背景色0.5s；
}
.btn1：悬停{
背景色：#0cf；
}
.btn1：活动{
背景色：#048；
边框顶部：3倍纯色#fff；
边界底部：0；
颜色：#888；
过渡：背景色0s；
}

按钮

将动画设置为“向前”时更改活动属性

.btn1{
背景色：#08f；
边界顶部：0；
右边界：0；
边框底部：3px实心#048；
左边框：0；
边界半径：20px；
颜色：#fff；
字号：16pt；
填充：10px 20px；
过渡：背景色0.5s；
}
.btn1：悬停{
背景色：#0cf；
}
.btn1：活动{
边框顶部：3倍纯色#fff；
边界底部：0；
颜色：#888；
动画：向前激活0.1s；
}
@关键帧激活{
从{背景色：#0cf；}
至{背景色：#048；}
}

按钮

你后面的部分把我弄糊涂了！无论鼠标按下时按钮的效果如何，您希望它在用户单击鼠标并将鼠标向上移动后仍保持不变吗？如果是这样，只需尝试将

：active

属性添加到

：focus

中，

.btn1:active、.btn1:focus{properties}

当我在

动画之后将0.1s更改为0s时，它就工作了。谢谢