Reputation: 500
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
Reputation: 1251
For Angular 8, this works for me:
<nav id="sidebar" [class]="!hovered ? 'active': ''" (mouseenter)='hovered=true' (mouseleave)="hovered=false">
Upvotes: 0
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
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