web-dev-qa-db-ja.com

Angular ng-mouseoverでのJS変更クラス

AngularJSを使用してボタンにカーソルを合わせると、ボタン（ボタン）にクラス（青）を追加しようとしています。

HTML

<button class="btn-add-optimize" ng-mouseover="hover(iets)">Add and Optimize</button>

AngularJS

$scope.hover = function (iets) {
    var Dit = this;
    Dit.add("blue");
};

誰でも手伝ってくれる？小さな例が望ましいので、それをいただければ幸いです。

javascripthtmlangularjsdom
14
Staafsak

私は成功してこのようなものを使いました：

<button
    ng-class="{'some-class':hovering}"
    ng-mouseenter="hovering=true"
    ng-mouseleave="hovering=false">Add and Optimize</button>

ボタンの入力と終了は$scope.hoveringを切り替え、some-classの適用は$scope.hoveringスコープ変数がtrueであることを条件とします。

40
Collin Allen
<button
ng-class="{'some-class':hovering}"
ng-mouseenter="hovering=true"
ng-mouseleave="hovering=false">Add and Optimize</button>

この形式を使用する必要があります：ng-class

13
Ercan

Angular 8の場合、これは私にとってはうまくいきます：

<nav id="sidebar" [class]="!hovered ? 'active': ''" (mouseenter)='hovered=true' (mouseleave)="hovered=false">
0
QauseenMZ