html - 单击并激活时更改 Bootstrap 4.1 .btn-outline-primary 背景？

Question

我目前正在使用类为 .btn-outline-primary 的 Bootstrap 4.1 按钮。在其常规状态下，该按钮具有白色背景和蓝色文本。但是，当您将鼠标悬停在按钮上时，颜色会反转，背景为蓝色，文本为白色。

此按钮的事件状态只是一个突出显示的边框(按钮样式与非事件状态相同 - 白色背景蓝色文本)我想这样做，以便在单击按钮时按钮保持不变悬停按钮时的样式。

但是，我无法访问该按钮的悬停类，因为它是一个引导按钮，我想知道如何实现这一点？这是按钮:

<button class='btn btn-outline-primary max-w-250 mx-1 my-1' type='button' id='MyButton' name='happyButton'>                                          
 <div class='d-flex flex-column justify-content-center align-items-center overflow-none'>                                                
  <div class='ButtonText line-height-16'>"Text Line One"</div>                                                                                                           
 </div>                                      
</button>

我曾尝试使用 :focus 来使用 css 样式来更改背景颜色，但是，这只会过度增强文本，因为文本不会反转并且背景现在与文本颜色匹配。

.btn-outline-primary:focus{
   background-color: #18f;
}

Answer 1

我不是 Bootstrap 的忠实用户，或者我会为您查找相关的类。相反，我将引导您完成使用 DevTools 自行查找它们的步骤。我将使用 Chrome，但步骤与 Firefox 和 Safari 类似。

1. 在呈现按钮的浏览器(同样，最好是 Chrome)中，右键单击该按钮。从菜单中选择检查。

2. 出现的框应该位于元素选项卡上，显示您的 html。确认该按钮在该显示中突出显示。如果不是，请单击按钮的 html 以突出显示它。

3. 新打开的框的右侧应该是一个描述所选元素的 Pane ，并且应该位于“样式”选项卡上。确认您希望应用到按钮的 css 规则存在。

4. 在该 Pane 的顶部附近，过滤器框旁边，有一个标有 :hov 的小按钮。单击该按钮会显示可应用于您的元素的各种伪类，如 :hover。选中 :hover 复选框。

5. :hover 规则现在应该显示在下面的 css 规则列表中。找到相关的声明(.btn-outline-primary:focus 或类似的东西)并复制它包含的规则。然后，您可以在自己的 css 中编写

.btn-outline-primary:active {
  [whatever rules you copied]
}

我有两个附录:

• 如果这不起作用，请再次执行前四个步骤，这次选择 :active 伪类。如果您添加的规则显示在您的规则列表中(它们可能很低!)但不起作用，则您遇到了 css 特异性问题，应该查一下
• 我写这篇文章的假设是，在谈论事件按钮时，您使用的是技术 css 意义上的术语，即只有按住按钮才会持续的变化。如果您希望按钮在单击后永久更改，则需要使用 css 之外的东西:使用一些 Javascript 更新按钮上的类或更改它并使用复选框