AngularJS ng-mouseleave Directive Last Updated : 31 Jul, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report The ng-mouseleave directive in AngularJS is used to apply custom behavior when a mouse-leave event occurs on a specific HTML element. It can be used to show a popup alert when the mouse leaves a specific position in an HTML element. It is supported by all HTML elements.Syntax:<element ng-mouseleave="expression"> content ... </element> Parameter:expression: When the mouse cursor leaves an element, then this expression will execute.Example 1: This example describes the ng-mouseleave Directive in AngularJS. HTML <!DOCTYPE html> <html> <head> <script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"> </script> <title>ng-mouseleave Directive</title> </head> <body ng-app="" style="text-align: center"> <h1 style="color:green">GeeksforGeeks</h1> <h3>ng-mouseleave Directive</h3> <div>price :</div> <div ng-hide="leave" ng-mouseenter="leave=true"> <span class="amount">$ {{price}}</span> </div> <div ng-show="leave" ng-mouseleave="leave=false"> <input type="number" class="form-control" ng-model="price" ng-init="price=250" /> </div> </body> </html> Output: Example 2: This example describes the ng-mouseleave Directive in AngularJS, by specifying the <input> tag that has the ng-mouseleave directive containing the alert() function which helps to display the data in the alert message. HTML <!DOCTYPE html> <html> <head> <title>ng-mouseleave 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> <h3>ng-mouseleave Directive</h3> <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: Comment More infoAdvertise with us Next Article AngularJS ng-mouseleave Directive V Vishal Chaudhary 2 Follow Improve Article Tags : Web Technologies AngularJS AngularJS-Directives Similar Reads 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 a popup alert when the mouse moves over a specific HTML element. It is supported by all HTML elements. Syntax:<element ng-mousemove="expressio 2 min read AngularJS ng-mouseover Directive The ng-mouseover Directive in AngularJS is used to apply custom behavior when a mouseover event occurs on a specific HTML element. It can be used to show a popup alert when the mouse moves over a specific element. It is supported by all HTML elements. Syntax: <element ng-mouseover="expression" 2 min read AngularJS ng-mouseenter Directive The ng-mouseenter directive in AngularJS is used to apply custom behavior when a mouse-enter event occurs on a specific HTML element. It can be used to show a popup alert when the mouse enters a specific position in an HTML element. It is supported by all HTML elements. Syntax:<element ng-mouseen 2 min read AngularJS ng-mouseup Directive The ng-mouseup Directive in AngularJS is used to apply custom behavior when a mouseup event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed. The order of a mouse click is Mousedown, Mouseup, Click. It is supported by all HTML elements. Syntax: 2 min read AngularJS ng-mousedown Directive The ng-mousedown Directive in AngularJS is used to apply custom behavior when mousedown event occurs on a specific HTML element. It can be used to show a popup alert when the mouse button is pressed down. It is supported by all HTML elements. Syntax: <element ng-mousedown="expression"> Content 1 min read Like