单击并处于活动状态时更改 Bootstrap 4.1 .btn-outline-primary 背景？

Posted 2023-03-07

【中文标题】单击并处于活动状态时更改 Bootstrap 4.1 .btn-outline-primary 背景？

【英文标题】：Changing Bootstrap 4.1 .btn-outline-primary background when clicked and active?

【发布时间】：2019-10-16 10:15:36

【问题描述】：

我目前正在使用类为 .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>

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

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

【参考方案1】：

我不是一个庞大的 Bootstrap 用户，否则我会为您查找相关的类。相反，我将引导您完成使用 DevTools 自己找到它们的步骤。我将使用 Chrome，但 Firefox 和 Safari 的步骤类似。

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

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

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

在该窗格顶部附近，在过滤器框旁边，有一个标记为 :hov 的小按钮。单击该按钮会显示可以应用于您的元素的各种伪类，例如 :hover。检查 :hover 复选框。

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

 

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

我有两个附录：

如果这不起作用，请再次执行前四个步骤，这次选择 :active 伪类。如果您添加的规则显示在您的规则列表中（它们可能已经下降！）但无法正常工作，那么您的 css 特异性有问题，应该查看 我写这篇文章的假设是，在谈论活动按钮时，您使用的是技术 css 意义上的术语，这是一种仅在按住按钮时才会持续的变化。如果您希望按钮在单击后永久更改，则需要使用 css 之外的东西：使用一些 javascript 更新按钮上的类或更改它并使用复选框

【讨论】：

这正是我所需要的！必须很明显，我是一个新手前端开发人员，我应该考虑检查元素。深入的说明是完美的，谢谢！