ng-mouseover 上的 Angular JS 更改类答案

【问题标题】：Angular JS Change Class on ng-mouseoverng-mouseover 上的 Angular JS 更改类
【发布时间】：2015-02-06 22:02:14
【问题描述】：

每当您使用 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");
};

谁能帮帮我？最好是一个小例子，将不胜感激！

【问题讨论】：

【解决方案1】：

我已经成功地使用了这样的东西：

<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。

【讨论】：

使用 CSS :hover 伪属性应该适用于大多数情况，但如果您还想使用它来触发页面上的其他行为，这将很好地工作。
我必须为它写一个指令，就我而言，我基本上是在所有重复的卡片喜欢元素上做的。 github.com/guilhermegeek/pi-angular-class-hover

【解决方案2】：

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

你应该使用这种形式：ng-class

【讨论】：

无法理解为什么当您使用与您上面相同的答案时人们给您 9 票。
@msqar 当时，Ercan 的回答在技术上是正确的，而 Collin 的回答包含一个错误，尽管它在其他方面是正确且相同的。随时查看my edit 以解决上述错误。

【解决方案3】：

对于 Angular 8，这对我有用：

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

【讨论】：