Question

我已经使用CSS创建了一个按钮，其中鼠标悬停时背景颜色变淡，并且在mousedown上立即变暗。问题是我想在mouseup上保持按钮的悬停状态而不重复其转换。怎么办？

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

Answer 1

使用设置为转发的动画更改活动属性

＆＃13;

$('.nav-overlay').click(function() {
    $('.cd-menu-icon').toggleClass('is-clicked');
});

＆＃13;

.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;}  
}

＆＃13;

在mouseup上防止CSS Hover Transition

1 个答案: