阻止 CSS 鼠标悬停时的悬停过渡

Question

我使用 CSS 创建了一个按钮，其中背景颜色在鼠标悬停时变浅，在鼠标按下时立即变暗。问题是我想在 mouseup 上保持按钮的悬停状态而不重复其过渡。怎么做到的？

.btn1 {
    background-color: #08f;
    border-top: 0;
    border-right: 0;
    border-bottom: 3px solid #048;
    border-left: 0;
    border-radius: 20px;
    color: #fff;
    font-size: 16pt;
    padding: 10px 20px;
    transition: background-color 0.5s;
}
.btn1:hover {
    background-color: #0cf;
}
.btn1:active {
    background-color: #048;
    border-top: 3px solid #fff;
    border-bottom: 0;
    color: #888;
    transition: background-color 0s;
}

<body>
    <button class="btn1">Button</button>
</body>

Answer 1

将活动属性的动画设置为向前

.btn1 {
    background-color: #08f;
    border-top: 0;
    border-right: 0;
    border-bottom: 3px solid #048;
    border-left: 0;
    border-radius: 20px;
    color: #fff;
    font-size: 16pt;
    padding: 10px 20px;
    transition: background-color 0.5s;
}
.btn1:hover {
    background-color: #0cf;
}
.btn1:active {
    border-top: 3px solid #fff;
    border-bottom: 0;
    color: #888;
    animation: activate 0.1s forwards;
}

@keyframes activate {
    from {background-color: #0cf;}  
    to {background-color: #048;}  
}

<body>
    <button class="btn1">Button</button>
</body>

阻止 CSS 鼠标悬停时的悬停过渡

Prevent CSS Hover Transition on mouseup

css

css-transitions