Question

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

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

但是，由于它是引导程序按钮，因此我无法访问该按钮的悬停类，我想知道如何实现此目的？这是按钮：

<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的步骤相似。

在呈现按钮的浏览器（同样最好是Chrome）中，右键单击该按钮。从菜单中选择“检查”。
出现的框应该在elements选项卡上，并显示您的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更新按钮上的类，或者对其进行更改并使用复选框

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

1 个答案: