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:
Contents...
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.
<html>
<head>
<title>ng-mousemove Directivetitle>
<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">GeeksforGeeksh1>
<h2>ng-mousemove Directiveh2>
<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.
<html>
<head>
<title>ng-mousemove Directivetitle>
<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">GeeksforGeeksh1>
<h2>ng-mousemove Directiveh2>
<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: