改变引导按钮的颜色和班级上点击或悬停/焦点

我有四个引导按钮与他们设置的btn-主类。在悬停或焦点上，我想更改按钮的颜色以显示悬停或焦点正在发生。改变引导按钮的颜色和班级上点击或悬停/焦点
点击按钮我想设置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>

来源

2017-02-14 megan

什么颜色你想每个按钮切换到悬停？它们应该已经变暗了。 –

我同意引导程序提供的悬停颜色稍有变化。我希望通过悬停或焦点上的颜色更改来让它更加明显。 – megan

你可以做css的方式。你为什么试图通过js？无论如何，使用ng-class来改变基于条件的css类。 –

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

尝试这样的事情。

来源

2017-02-14 14:16:27

作为一种最佳实践，您应该重写引导程序样式（而不是直接编辑它们）。要覆盖引导程序的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; 
}

只要确保自己的样式与这些覆盖来引导样式表后。

UPDATE

要限制这只是这些按钮，你可以给周围的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; 
}

来源

2017-02-14 14:18:28

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

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

假设你的按钮的id是buttonId，然后从控制器

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

来源

2017-02-14 14:28:06

改变引导按钮的颜色和班级上点击或悬停/焦点

回答

相关问题