AngularJS ng-mousemove Directive
Last Updated :
29 Jul, 2024
Improve
The ng-mousemove Directive in AngularJS is used to apply custom behavior when mousemove event occurs on a specific HTML element. It can be used to display a popup alert when the mouse moves over a specific HTML element. It is supported by all HTML elements.
Syntax:
<element ng-mousemove="expression">
Contents...
</element>
Parameter value:
- expression: This parameter depicts when the mouse cursor is moved over the element then the expression will be executed.
Example 1: This example uses the ng-mousemove Directive to change the CSS style.
<!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>
Output:
Example 2: This example uses the ng-mousemove Directive to display the alert message.
<!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>
Output:
