La directiva ng-mousemove en AngularJS se usa para aplicar un comportamiento personalizado cuando ocurre un evento mousemove en un elemento HTML específico. Se puede usar para mostrar una alerta emergente cuando el mouse se mueve sobre un elemento HTML específico. Es compatible con todos los elementos HTML.
Sintaxis:
<element ng-mousemove="expression"> Contents... </element>
Ejemplo 1: este ejemplo usa la directiva ng-mousemove para cambiar el estilo CSS.
<!DOCTYPE html>
<html>
<head>
<title>ng-mousemove Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="app" style="padding-left:30px;">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-mousemove Directive</h2>
<div ng-controller="geek">
<div style="height:20px;width:20px; " ng-style=
"{'backgroundColor':'lightgreen', width:X+'px',
height:Y+'px' }" ng-mousemove="down($event)"></div>
<pre ng-show="X">Current position: {{X}}, {{Y}}</pre>
</div>
<script>
var app = angular.module("app", []);
app.controller('geek', ['$scope', function ($scope) {
$scope.down = function (event) {
$scope.X = event.clientX;
$scope.Y = event.clientY;
};
}]);
</script>
</body>
</html>
Salida:
Antes de que el mouse mueva el elemento: 
Después de que el mouse mueva el elemento:
Ejemplo 2: este ejemplo utiliza la directiva ng-mousemove para mostrar el mensaje de alerta.
<!DOCTYPE html>
<html>
<head>
<title>ng-mousemove Directive</title>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js">
</script>
</head>
<body ng-app="app" style="text-align:center">
<h1 style="color:green">GeeksforGeeks</h1>
<h2>ng-mousemove Directive</h2>
<div ng-controller="app">
Input: <input type="text" ng-mouseleave="alert()"
ng-model="click" />
</div>
<script>
var app = angular.module("app", []);
app.controller('app', ['$scope', function ($scope) {
$scope.click = 'geeksforgeeks';
$scope.alert = function () {
alert($scope.click);
}
}]);
</script>
</body>
</html>
Salida:
Antes de que el mouse mueva el elemento de entrada: 
Después de que el mouse mueva el elemento de entrada:
Publicación traducida automáticamente
Artículo escrito por Vishal Chaudhary 2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA