Question

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

请问您如何处理以上两个问题？

<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>

Answer 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;
}

尝试这样的事情。

Answer 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;
}

Answer 3

您可以尝试这样：为要更改css的按钮提供ID，然后从控制器中调用它。

假设您的按钮ID为buttonId，然后来自控制器

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

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

3 个答案: