在mouseup上阻止CSS悬停转换 [英] Prevent CSS Hover Transition on mouseup
本文介绍了在mouseup上阻止CSS悬停转换的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用CSS创建了一个按钮，其中背景颜色在鼠标悬停时变淡，并且在鼠标悬停时立即变得更暗。问题是，我想保持按钮的鼠标悬停状态，而不重复其过渡。如何实现？
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>
推荐答案
使用设置为向前的动画更改活动属性
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>
这篇关于在mouseup上阻止CSS悬停转换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
