css - 单击 Bootstrap 按钮时，它会更改为主要状态

Question

这个问题可能看起来是重复的，但其他解决方案对我不起作用。

我的问题是，每当我单击自定义的 Bootstrap 按钮时，它就会更改为 btn-primary 样式。

自定义按钮:

点击按钮:

当我搜索解决方案时，我只能通过 btn:active:focus 找到它们。 我已经尝试过这个，但它对我来说没有效果。

我的CSS:

.btn-custom01 {
    background-color:#3b3b3b;
    border-color:#ff0066;
}
.btn-custom01:active:focus{background-color:#333333; border-color:#ff0066; color:#ff0066; }
.btn-custom01:hover{background-color:#3b3b3b; border-color:#f2f2f2;}

我该如何解决这个问题？我希望这里有人可以帮助我。

Answer 1

看起来您正在链接元素状态，从链中删除事件状态并且焦点开始工作。如果您想要两者，请以不同的方式将它们分开。

.btn-custom01 {
  background-color: #3b3b3b;
  border-color: #ff0066;
}

.btn-custom01:focus {
  background-color: #333333;
  border-color: #ff0066;
  color: #ff0066;
}

.btn-custom01:hover {
  background-color: #3b3b3b;
  border-color: #f2f2f2;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet" />
<button class='btn btn-custom01'>Hello World</button>