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

问题是，当我点击按钮时，它的背景色会消失，只有当我点击页面上的其他地方时才会再次出现。

按钮的三种状态：点击前、悬停和点击后

我尝试了下面的代码，乍一看是有效的，但现在按钮不是"可点击的"；不再是红色(仅用于测试目的(，悬停时不会改变颜色。和以前一样，它只返回紫色，并允许在单击其他位置时悬停。

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

有没有办法让按钮接受多次点击，始终保持紫色，只有在悬停时才会改变(这是最初的状态(？

Answer 1

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

你可以做下面这样的事情来去除焦点：

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

参考：如何删除点击按钮周围的焦点

Answer 2

是的，您可以为按钮尝试多个psuedo类。

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

.btn {
cursor: pointer;
}
.btn-purple {
background-color: purple;
color: white;
}
.btn-purple:hover {
background-color: red;
}
.btn-purple:focus {
background: purple;
}
.btn-purple:focus:hover {
background: red;
}

<button class="btn btn-purple ts24r">-</button>
<button class="btn btn-purple ts24r">+</button>

Answer 3

button:focus表示在单击另一个元素之前，按钮将保持在焦点上(不可单击(。

当按钮被激活时，button:active适用。因此，如果您希望按钮(或任何元素(在单击时具有特定的颜色，则可以使用pseudo类。

我想你可以这样做：

.btn-purple {
background-color: purple;
}
.btn-purple:hover {
background-color: green;
}
.btn-purple:active{
background-color: purple;
}

<button class="btn btn-purple ts24r">+</button>

点击此处阅读更多