我正在try 实现一个计数器，但现在我只使用HTML、CSS和Bootstrap.
<button class="btn btn-purple ts24r">+</button>
.btn-purple {
background-color: var(--purple);
color: var(--white);
}
.btn-purple:hover {
background-color: var(--green);
}
问题是，当我点击我的按钮时，它的背景色消失了，只有当我点击页面上的其他地方时，它才会再次出现.
The three states of the button: before click, hover and after click个
我try 了以下代码，乍一看还不错，但现在按钮不再"可点击"，它保持红色(仅用于测试目的)，并且在悬停时不会改变 colored颜色 .和以前一样，它只返回到紫色，当我点击其他地方时，它允许悬停.
.btn-purple:focus {
background-color: red;
}
有没有办法让按钮接受多次点击，始终保持紫色，只有在悬停时才会改变(这是初始状态)？