CODEWITHSUNDEEP
javascripthtmlangularjsdom
Staafsak
Staafsak

Reputation: 500

Angular JS Change Class on ng-mouseover

Am trying to add a class (blue) to a button when ever you hover the button using 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");
};

Anyone can help me out? Preferable a small example, it would be very appreciated!

Upvotes: 17

Views: 24795

Answers (3)

QauseenMZ
QauseenMZ

Reputation: 1251

For Angular 8, this works for me:

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

Upvotes: 0

Collin Allen
Collin Allen

Reputation: 4595

I've used something like this with success:

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

Entering and leaving the button toggles $scope.hovering, and the application of some-class is contingent on the $scope.hovering scope variable being true.

Upvotes: 44

Ercan
Ercan

Reputation: 405

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

You should use this form : ng-class

Upvotes: 14

Related Questions