Prevent CSS Hover Transition on mouseup

问题

I have created a button using CSS in which the background color fades lighter on mouseover and immediately becomes darker on mousedown. The problem is that I want to maintain the button's hover state on mouseup without repeating its transition. How can that be done?

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

回答1:

Change the active property with an animation set to forwards

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

来源：https://stackoverflow.com/questions/32277872/prevent-css-hover-transition-on-mouseup

标签

css3

css-transitions

易学教程内所有资源均来自网络或用户发布的内容，如有违反法律规定的内容欢迎反馈！
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!