HTML + CSS - 单击后按钮未返回初始状态

Question

我正在尝试实现一个计数器，但现在我只使用 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

我尝试了以下代码，乍一看它可以工作，但现在按钮不再“可单击”，它保持红色(仅用于测试目的)并且悬停时不会改变颜色。和以前一样，当我单击其他地方时，它仅返回紫色并允许悬停。

.btn-purple:focus {
   background-color: red;
}

有没有办法让按钮接受多次点击，始终保持紫色并且仅在悬停时改变(这是初始状态)？

Answer 1

这似乎是 MacOS 和 Chrome 上 Bootstrap 的问题。

您可以执行如下操作来删除焦点:

<a class="btn btn-purple ts24r" onclick="this.blur();">+</a>

引用:How to remove focus around buttons on click