单击或悬停/聚焦时更改引导按钮颜色和类答案

【问题标题】：Change bootstrap button colour and class on click or on hover/focus单击或悬停/聚焦时更改引导按钮颜色和类
【发布时间】：2017-07-02 20:48:08
【问题描述】：

我有四个设置了 btn-primary 类的引导按钮。在悬停或聚焦时，我想更改按钮的颜色以显示悬停或聚焦正在发生。
单击按钮时，我想设置 btn-danger 引导类。我已经在按钮上附加了一个 ng-click 事件，因此不确定如何获取按钮的句柄并仅更改该按钮上的 css。我见过的例子有一个 jquery click 事件处理程序，但不确定这是否是最好的方法

请您建议如何处理上述两个查询？

<div>
<br>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Create')">Create Requests
       </button>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Update')">Update Requests
       </button>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Activate')">Activation
    Requests
       </button>
&nbsp;
<button type="button" class="btn  btn-primary" ng-click="pendingReqCtrl.loadData('Deactivate')">Deactivation
    Requests
       </button>
</div>

【问题讨论】：

您希望在悬停时将每个按钮更改为什么颜色？它们应该已经稍微变暗了。
我同意 bootstrap 提供的悬停颜色略有变化。我想通过悬停或聚焦时的颜色变化使其更加明显。
你可以做 css 的方式。你为什么要尝试 js？无论如何使用 ng-class 来改变基于条件的 css 类。

标签： javascript jquery angularjs twitter-bootstrap

【解决方案1】：

<button type="button" class="btn" ng-class="{ 'btn-primary': !pendingReqCtrl.isButtonHover,  'someClass': pendingReqCtrl.isButtonHover, 'btn-danger': pendingReqCtrl.isClick" ng-mouseover="onMouseOver(true)" ng-mouseleave="onMouseOver(false)" ng-click="pendingReqCtrl.loadData('Create')">Create Requests
   </button>

function onMouseOver(isHover){
    pendingReqCtrl.isButtonHover = isHover;
 }

function loadData(){
    pendingReqCtrl.isClick= true;
}

试试这样的。

【讨论】：

【解决方案2】：

作为最佳实践，您应该覆盖引导样式（而不是直接编辑它们）。要覆盖引导程序的 btn-primary:hover 样式，请将其添加到您自己的自定义样式表中。

.btn-primary:hover {
    color: #fff;
    background-color: #286090; /* new color goes her */
    border-color: #204d74;
}

这会覆盖btn-primary:focus 样式：

.btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #286090; /* new color goes her */
    border-color: #122b40;
}

只需确保您自己的带有这些覆盖的样式表位于引导样式表之后。

更新

要将其限制为仅那些按钮，您可以给周围的 div 一个 id="myButtons"，然后 css 覆盖可以变为

#myButtons .btn-primary:hover {
    color: #fff;
    background-color: #286090; /* new color goes her */
    border-color: #204d74;
}

#myButtons .btn-primary.focus, .btn-primary:focus {
    color: #fff;
    background-color: #286090; /* new color goes her */
    border-color: #122b40;
}

【讨论】：

谢谢马修。我还有其他使用 btn-primary 的页面，它们在悬停或聚焦时不需要类似的行为。那么有没有办法只指定上面 4 个按钮的引导覆盖？

【解决方案3】：

你可以试试这个：给你想改变css的按钮一个id，然后从你的控制器调用它。

假设你的按钮 id 是buttonId，那么来自控制器

document.getElementById('buttonId').style.color = 'blue'
document.getElementById('buttonId').style.width = value

【讨论】：