ng-mouseover 上的 Angular JS 更改类

Posted 2023-02-22

【中文标题】ng-mouseover 上的 Angular JS 更改类

【英文标题】：Angular JS Change Class on ng-mouseover

【发布时间】：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");
;

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

【问题讨论】：

为什么不直接使用css？ .btn-add-optimize:hover color: blue;

我也强烈建议使用 css。使用 Angular 来实现这样的功能已经超出了顶峰。

谢谢 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">