AngularJS | ng-mousemove Directive

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 popup alert when mouse moves over a specific HTML element. It is supported by all HTML elements.

Syntax:

<element ng-mousemove="expression"> Contents... </element>

Example 1: This example uses ng-mousemove Directive to change the CSS style.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>ng-mousemove Directive</title>
      
    <script src=
    </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>

chevron_right


Output:
Before mouse move the element:
ngmousemove
After mouse move the element:
ngmousemove

Example 2: This example uses ng-mousemove Directive to display the alert message.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>ng-mousemove Directive</title>
      
    <script src=
    </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>

chevron_right


Output:
Before mouse move the input element:
ngmousemove
After mouse move the input element:
ngmousemove



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.