ブートストラップボタンの色とクラスをクリックまたはホバー/フォーカスに変更

Question

1. btn-primaryクラスが設定された4つのブートストラップボタンがあります。 ホバーまたはフォーカスで、ホバーまたはフォーカスが行われていることを示すためにボタンの色を変更したいとします。

2. ボタンをクリックすると、btn-dangerブートストラップクラスを設定したいと思います。私はすでにボタンにng-clickイベントを添付しているので、ボタンへのハンドルを取得してそのボタンのCSSだけを変更することはできません。私が見た例では、jqueryのクリックイベントハンドラがありますが、これが最善のアプローチであるかどうかはわかりません

上記の2つのクエリについてのアドバイスはありますか？

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

はただ、これらのオーバーライドを使用して独自のスタイルシートは、ブートストラップスタイルシートの後に来ることを確認してください。そのボタンにIDを与える：あなたはこれを試すことができますが、周囲の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

になることができる唯一のこれらのボタンにこれを制限するには

UPDATE

あなたはcssを変更して、あなたのコントローラーからそれを呼び出すことを望みます。

は、あなたのボタンのidはコントローラから、その後、buttonIdあるとし

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