Javascript ng-mouseover 上的 Angular JS 更改类

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/27371711/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 00:05:05  来源:igfitidea点击:

Angular JS Change Class on ng-mouseover

javascripthtmlangularjsdom

提问by Staafsak

Am trying to add a class (blue) to a button when ever you hover the button using AngularJS.

当您使用 AngularJS 悬停按钮时,我正在尝试向按钮添加一个类(蓝色)。

HTML

HTML

<button class="btn-add-optimize" ng-mouseover="hover(iets)">Add and Optimize</button>

AngularJS

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!

任何人都可以帮助我吗?最好是一个小例子,将不胜感激!

回答by Collin Allen

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-classis contingent on the $scope.hoveringscope variable being true.

进入和离开按钮切换$scope.hovering, 的应用some-class取决于$scope.hovering范围变量是true

回答by Ercan

<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

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

回答by QauseenMZ

For Angular 8, this works for me:

对于 Angular 8,这对我有用:

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