在单击或悬停/焦点时更改引导按钮颜色和类别
在单击或悬停/焦点时更改引导按钮颜色和类别
提问于 2017-02-14 14:05:41
- 我有四个引导按钮与btn-主要的类设置在他们上。在悬停或焦点，我想改变颜色的按钮，以显示在悬停或焦点正在发生。
- 点击一个按钮，我想设置btn-危险引导类。我已经有一个ng点击事件附加到按钮上，所以我不确定如何才能得到按钮的句柄，并且只在该按钮上更改css。我看到的示例中有jquery单击事件处理程序，但不确定这是否是最好的方法。
请您就以上两个问题提出建议。
<div>
<br>
<button type="button" class="btn btn-primary" ng-click="pendingReqCtrl.loadData('Create')">Create Requests
</button>
<button type="button" class="btn btn-primary" ng-click="pendingReqCtrl.loadData('Update')">Update Requests
</button>
<button type="button" class="btn btn-primary" ng-click="pendingReqCtrl.loadData('Activate')">Activation
Requests
</button>
<button type="button" class="btn btn-primary" ng-click="pendingReqCtrl.loadData('Deactivate')">Deactivation
Requests
</button>
</div>回答 3
Stack Overflow用户
发布于 2017-02-14 14:16:27
<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;
}试试这样的东西。
Stack Overflow用户
发布于 2017-02-14 14:18:28
作为最佳实践，您应该重写引导样式(而不是直接编辑它们)。若要重写引导程序的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;
}Stack Overflow用户
发布于 2017-02-14 14:28:06
您可以尝试这样做:向要更改css的按钮提供一个id，然后从您的控制器调用它。
假设您的按钮id是buttonId，然后从控制器
document.getElementById('buttonId').style.color = 'blue'
document.getElementById('buttonId').style.width = value页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/42228251
复制相关文章
相似问题
腾讯云开发者
