Angular JS Change Class on ng-mouseover

Question

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!

Why not just use css? .btn-add-optimize:hover {color: blue;} — Blue
– Blue, Commented Dec 9, 2014 at 5:05
I would highly advise using css, as well. Using angular for such functionality is going way over the top. — gsalisi
– gsalisi, Commented Dec 9, 2014 at 5:54

Collin Allen · Accepted Answer · 2016-06-21 15:38:03Z

44

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.

edited Jun 21, 2016 at 15:38

answered Dec 9, 2014 at 5:03

Collin Allen

4,5953 gold badges40 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Collin Allen Over a year ago

Using the CSS :hover pseudo-attribute should work for most cases, but if you want to use it to trigger other behaviors on the page as well, this will work nicely.

Gui Over a year ago

I had to write a directive for it, in my case i was doing it basically on all card likes elements wich was repetitive. github.com/guilhermegeek/pi-angular-class-hover

Ercan · Accepted Answer · 2015-12-23 10:33:17Z

14

<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

answered Dec 23, 2015 at 10:33

Ercan

4054 silver badges7 bronze badges

2 Comments

msqar Over a year ago

can't understand why people gave you 9 up votes when you just used the very same answer above you.

Aaron Campbell Over a year ago

@msqar At the time, Ercan's answer was technically correct and Collin's contained a bug, even though it was otherwise correct and identical. Feel free to review my edit to solve said bug.

QauseenMZ · Accepted Answer · 2019-11-01 21:05:44Z

0

For Angular 8, this works for me:

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

answered Nov 1, 2019 at 21:05

QauseenMZ

1,2519 silver badges7 bronze badges

Collectives™ on Stack Overflow

Angular JS Change Class on ng-mouseover

3 Answers 3

2 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

2 Comments

Comments

Related